# Select
A select displays a collapsible list of options and allows a user to select one of them.
## Content
`Select` reuses the `ListBox` component, following the [Collection Components API](collections.html?component=Select). It supports ListBox features such as static and dynamic collections, sections, disabled items, links, text slots, asynchronous loading, etc. See the [ListBox docs](ListBox.md) for more details.
The following example shows a dynamic collection of items, grouped into sections.
```tsx
import {Select, SelectItem} from 'vanilla-starter/Select';
import {ListBoxSection, Collection, Header} from 'react-aria-components';
function Example() {
/*- begin collapse -*/
let options = [
{name: 'Fruit', children: [
{name: 'Apple'},
{name: 'Banana'},
{name: 'Orange'},
{name: 'Honeydew'},
{name: 'Grapes'},
{name: 'Watermelon'},
{name: 'Cantaloupe'},
{name: 'Pear'}
]},
{name: 'Vegetable', children: [
{name: 'Cabbage'},
{name: 'Broccoli'},
{name: 'Carrots'},
{name: 'Lettuce'},
{name: 'Spinach'},
{name: 'Bok Choy'},
{name: 'Cauliflower'},
{name: 'Potatoes'}
]}
];
/*- end collapse -*/
return (
);
}
```
### Autocomplete
`Select` can include additional components as siblings of the `ListBox`. This example uses an [Autocomplete](Autocomplete.md) with a [SearchField](SearchField.md) to let the user filter the items.
```tsx
import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components';
import {Button} from 'vanilla-starter/Button';
import {SelectListBox, SelectItem} from 'vanilla-starter/Select';
import {Popover} from 'vanilla-starter/Popover';
import {SearchField} from 'vanilla-starter/SearchField';
import {ChevronDown} from 'lucide-react';
function Example() {
let {contains} = useFilter({sensitivity: 'base'});
return (
);
}
```
### TagGroup
Use the `SelectValue` render prop function to display the selected items as a [TagGroup](TagGroup.md).
```tsx
import {Autocomplete, Select, SelectValue, Group, useFilter} from 'react-aria-components';
import {Button} from 'vanilla-starter/Button';
import {SelectListBox, SelectItem} from 'vanilla-starter/Select';
import {Label} from 'vanilla-starter/Form';
import {Popover} from 'vanilla-starter/Popover';
import {Plus} from 'lucide-react';
import {SearchField} from 'vanilla-starter/SearchField';
import {Tag, TagGroup} from 'vanilla-starter/TagGroup';
import {useRef} from 'react';
import './MultiSelect.css';
/*- begin collapse -*/
const states = [
{id: 'AL', name: 'Alabama'},
{id: 'AK', name: 'Alaska'},
{id: 'AZ', name: 'Arizona'},
{id: 'AR', name: 'Arkansas'},
{id: 'CA', name: 'California'},
{id: 'CO', name: 'Colorado'},
{id: 'CT', name: 'Connecticut'},
{id: 'DE', name: 'Delaware'},
{id: 'DC', name: 'District of Columbia'},
{id: 'FL', name: 'Florida'},
{id: 'GA', name: 'Georgia'},
{id: 'HI', name: 'Hawaii'},
{id: 'ID', name: 'Idaho'},
{id: 'IL', name: 'Illinois'},
{id: 'IN', name: 'Indiana'},
{id: 'IA', name: 'Iowa'},
{id: 'KS', name: 'Kansas'},
{id: 'KY', name: 'Kentucky'},
{id: 'LA', name: 'Louisiana'},
{id: 'ME', name: 'Maine'},
{id: 'MD', name: 'Maryland'},
{id: 'MA', name: 'Massachusetts'},
{id: 'MI', name: 'Michigan'},
{id: 'MN', name: 'Minnesota'},
{id: 'MS', name: 'Mississippi'},
{id: 'MO', name: 'Missouri'},
{id: 'MT', name: 'Montana'},
{id: 'NE', name: 'Nebraska'},
{id: 'NV', name: 'Nevada'},
{id: 'NH', name: 'New Hampshire'},
{id: 'NJ', name: 'New Jersey'},
{id: 'NM', name: 'New Mexico'},
{id: 'NY', name: 'New York'},
{id: 'NC', name: 'North Carolina'},
{id: 'ND', name: 'North Dakota'},
{id: 'OH', name: 'Ohio'},
{id: 'OK', name: 'Oklahoma'},
{id: 'OR', name: 'Oregon'},
{id: 'PA', name: 'Pennsylvania'},
{id: 'RI', name: 'Rhode Island'},
{id: 'SC', name: 'South Carolina'},
{id: 'SD', name: 'South Dakota'},
{id: 'TN', name: 'Tennessee'},
{id: 'TX', name: 'Texas'},
{id: 'UT', name: 'Utah'},
{id: 'VT', name: 'Vermont'},
{id: 'VA', name: 'Virginia'},
{id: 'WA', name: 'Washington'},
{id: 'WV', name: 'West Virginia'},
{id: 'WI', name: 'Wisconsin'},
{id: 'WY', name: 'Wyoming'}
];
/*- end collapse -*/
function SelectWithTagGroup() {
let triggerRef = useRef(null);
let {contains} = useFilter({sensitivity: 'base'});
return (
);
}
```
## Value
Use the `defaultValue` or `value` prop to set the selected item. The value corresponds to the `id` prop of an item. When `selectionMode="multiple"`, `value` and `onChange` accept an array. Items can be disabled with the `isDisabled` prop.
```tsx
import {Select, SelectItem} from 'vanilla-starter/Select';
import {useState} from 'react';
function Example(props) {
let [animal, setAnimal] = useState("bison");
return (
Current selection: {JSON.stringify(animal)}
);
}
```
## Forms
Use the `name` prop to submit the `id` of the selected item to the server. Set the `isRequired` prop to validate that the user selects an option, or implement custom client or server-side validation. See the Forms guide to learn more.
```tsx
import {Select, SelectItem} from 'vanilla-starter/Select';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'vanilla-starter/Form';
```
## API
```tsx
```
### Select
| Name | Type | Default | Description |
|------|------|---------|-------------|
| `allowsEmptyCollection` | `boolean | undefined` | — | Whether the select should be allowed to be open when the collection is empty. |
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `autoComplete` | `string | undefined` | — | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoFocus` | `boolean | undefined` | — | Whether the element should receive focus on render. |
| `children` | `ChildrenOrFunction` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `ClassNameOrFunction | undefined` | 'react-aria-Select' | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `defaultOpen` | `boolean | undefined` | — | Sets the default open state of the menu. |
| `defaultSelectedKey` | `Key | undefined` | — | The initial selected key in the collection (uncontrolled). |
| `defaultValue` | `ValueType | undefined` | — | The default value (uncontrolled). |
| `dir` | `string | undefined` | — | |
| `disabledKeys` | `Iterable | undefined` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `excludeFromTabOrder` | `boolean | undefined` | — | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| `form` | `string | undefined` | — | The `