# Select

Select field that opens a bottom sheet of options. Your pick lights up with a check, then the sheet closes and the field shows the new value; drag down to dismiss.

> Composed · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add select
```

## Import

```tsx
import { SelectItem } from "@/components/ui/select/select";
```

## Variants

- `payment` — Move money: `npx @lumioui/cli add select-payment`
- `slot` — Event details: `npx @lumioui/cli add select-slot`

## Props

### SelectItem

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | — |
| `label?` | `string` | — |
| `icon?` | `IconName` | Leading icon in the option row (and in the trigger when selected). |
| `subtitle?` | `string` | Secondary text under the label. |
| `leading?` | `React.ReactNode` | Custom leading node — wins over `icon`. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### Select

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled value. Omit with defaultValue for uncontrolled use. |
| `defaultValue?` | `string` | Uncontrolled initial value. |
| `onValueChange?` | `(value: string) => void` | — |
| `open?` | `boolean` | Controlled open state. Omit with defaultOpen for uncontrolled use. |
| `defaultOpen?` | `boolean` | Uncontrolled initial open state. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `options?` | `SelectOption[]` | — |
| `placeholder?` | `string` | — |
| `disabled?` | `boolean` | — |
| `title?` | `string` | Title shown at the top of the options sheet. |
| `variant?` | `"field" | "row"` | Trigger style: "field" renders a form input, "row" renders a settings  row (label left, value + chevron right). Default "field". |
| `icon?` | `IconName` | Leading icon on the trigger when no option is selected (field variant). |
| `label?` | `string` | Visible label on the row variant. Ignored on field. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `check` — /icons.html?i=check
- `chevron-right` — /icons.html?i=chevron-right
- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/select