Input

The single-line text input.

A plain <input> with the theme’s border and focus ring. The props are the native ones, type included.

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";

Tie a Label to it with htmlFor.

States

Written as	Looks like
`disabled`	Dimmed, not interactive
`aria-invalid`	Border and ring turn `destructive`
`readOnly`	Unchanged, but not editable

Validation styling is just aria-invalid — pass the boolean straight through.

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

To attach an icon or button on either end, use InputGroup.