Select
Pick one value from a list that opens like a menu.
<Select
aria-label="Region"
options={regions}
defaultValue="eu-west"
/>Props
initial
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/select.jsonThe CLI writes components/ikada/select.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Select } from "@sproutboat/ikada";
Usage
import { Select } from "@/components/ikada/select";
<Select
aria-label="Region"
options={regions}
defaultValue="eu-west"
/>Examples
const regions = [
{ value: "eu-west", label: "eu-west" },
{ value: "us-east", label: "us-east" },
{ value: "ap-south", label: "ap-south", disabled: true },
];
const [value, setValue] = useState<string | null>("eu-west");
<Field label="Region">
<Select options={regions} value={value} onValueChange={setValue} />
</Field><Field label="Region">
<Select options={regions} placeholder="Pick a region" />
</Field>Pick a region.
<Field label="Region" error="Pick a region.">
<Select options={regions} />
</Field><Field label="Region">
<Select options={regions} defaultValue="eu-west" disabled />
</Field>Props
| Prop | Type | Description |
|---|---|---|
| optionsrequired | readonly SelectOption[] | The choices, in order: value and label. |
| placeholder | string | Shown while nothing is chosen. Default "Select...". |
| invalid | boolean | Marks the trigger invalid: danger ring and aria-invalid. |
| className | string | Classes merged onto the root element, after ikada's own. |
| aria-label | string | Accessible name when there is no Field label. |
| id | string | The id of the Select. |
Also takes every prop of Omit< ComponentProps<typeof BaseSelect.Root<string>>, "children" | "items" | "className" >.
Source: src/components/select.tsx