---
url: https://react-ui.bas.dev/inputs/select.md
---
# Select

A Base UI select in the style of a menu, so a settings field and a picker in a toolbar read the same. It brings the keyboard with it: arrows, Home and End, typeahead, Enter and Escape.

```tsx
import { Select } from '@basmilius/react-ui';
```

`outlined` is the default, a bordered field. `ghost` is the quiet trigger of a toolbar. An item can carry an icon, a description on a second line, and `disabled`. With no value picked the trigger shows the `placeholder`, or the library's "Select".

## Groups

Hand `items` a list of groups instead of a list of items, and each group gets a label above its rows.

## Props

`Select` is generic over the value, a string type.

| Prop | Type | Default | |
| --- | --- | --- | --- |
| `value` | `T \| null` | | Required. |
| `onValueChange` | `(value: T) => void` | | Required. |
| `items` | `SelectItem<T>[] \| SelectGroup<T>[]` | | Required. |
| `label` | `string` | | Required. The accessible name of the trigger; the row above it usually carries the visible one. |
| `placeholder` | `string` | `'Select'` | |
| `size` | `'sm' \| 'md'` | `'md'` | |
| `variant` | `'outlined' \| 'ghost'` | `'outlined'` | |
| `disabled` | `boolean` | | |
| `align` | `'start' \| 'end'` | `'start'` | Where the popup lines up with the trigger. |
| `truncateValue` | `boolean` | `true` | Cuts a long value off with an ellipsis. |
| `className` | `string` | | |
| `ref` | `Ref<HTMLButtonElement>` | | The trigger. |

A `SelectItem<T>` is `{ value, label, description?, icon?, disabled? }`. A `SelectGroup<T>` is `{ label, items }`. `SelectProps`, `SelectItem` and `SelectGroup` are exported types.