# Select

Pick one value from a list that opens like a menu.

Source page: https://sproutboat.com/ikada/components/select

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/select.json
```
Or from the package: `import { Select } from "@sproutboat/ikada";`
## Usage
```tsx
import { Select } from "@/components/ikada/select";

<Select
  aria-label="Region"
  options={regions}
  defaultValue="eu-west"
/>
```
## Examples
### Default

```tsx
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>
```
### Placeholder

```tsx
<Field label="Region">
  <Select options={regions} placeholder="Pick a region" />
</Field>
```
### Error

```tsx
<Field label="Region" error="Pick a region.">
  <Select options={regions} />
</Field>
```
### Disabled

```tsx
<Field label="Region">
  <Select options={regions} defaultValue="eu-west" disabled />
</Field>
```
## Props
### SelectProps
Also takes every prop of `Omit< ComponentProps<typeof BaseSelect.Root<string>>, "children" | "items" | "className" >`.
| Prop | Type | Description |
| --- | --- | --- |
| options | `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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/select.tsx