Input

1 行のテキスト入力。

素の <input> にテーマの枠線とフォーカスリングを付けたものです。props はネイティブの <input> と同じで、type もそのまま使えます。

export const client = "only";

import { Input, Label } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex w-80 flex-col gap-4">
      <div className="grid gap-2">
        <Label htmlFor="q">検索</Label>
        <Input id="q" placeholder="顧客名で絞り込む" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="amount">金額の下限</Label>
        <Input id="amount" type="number" defaultValue={10000} />
      </div>
      <Input placeholder="無効" disabled />
      <Input placeholder="不正な値" aria-invalid />
    </div>
  );
}

import { Input } from "@squadbase/vantage/ui";

ラベルは Label を htmlFor で結び付けてください。

状態

書き方	見た目
`disabled`	薄くなり操作不可
`aria-invalid`	枠線とリングが `destructive` 色になる
`readOnly`	見た目はそのまま、編集不可

バリデーションエラーの表示は aria-invalid を付けるだけで揃います。真偽値をそのまま渡せます。

<Input aria-invalid={Boolean(error)} />

前後にアイコンやボタンを添えたいときは InputGroup を使います。