# Select primitives (/components/primitives/select)
Use these primitives when [`SelectField`](/components/forms/select-field) does not fit your layout.
They expose the root, trigger, value, indicator, popover, listbox, and option parts that
`SelectField` composes. Start with `SelectField` when it fits.
apps/docs/src/examples/select-primitive/basic.tsx
```tsx
import { Field } from '@luke-ui/react/primitives/field';
import {
SelectIndicator,
SelectItem,
SelectListBox,
SelectPopover,
SelectRoot,
SelectTrigger,
SelectValue,
} from '@luke-ui/react/primitives/select';
import { Stack } from '@luke-ui/react/stack';
export default () => {
return (
Australia
Canada
New Zealand
);
};
```
## Anatomy [#anatomy]
`SelectRoot` is the semantic root. It connects the trigger to the label, description, and error
inside it, and normally owns the selection, open state, validation, form state, and size.
`SelectTrigger` is the button that opens the popover, and it draws the control chrome. It holds a
`SelectValue`, which shows the selected option, and a `SelectIndicator`. `SelectPopover` holds a
`SelectListBox`, which holds the `SelectItem` options.
Put the `SelectValue` before the `SelectIndicator`.
## Root props [#root-props]
Put `placeholder` and the selection, open state, validation, form, and size props on `SelectRoot`.
`value` and `defaultValue` take a key, or `null` for no selection, and `onChange` receives the same
type. A select has no read-only state.
`id`, `className`, and `ref` on `SelectRoot` target the root element. `triggerId` targets the
trigger, and `ref` on `SelectTrigger` reaches it.
## Options [#options]
Use `SelectItem` for options. `SelectListBox` accepts static children or `items` with a render
function.
## Indicator [#indicator]
`SelectIndicator` shows a chevron by default and sets `data-open` while the popover is open. Pass
`children` to replace the chevron.
apps/docs/src/examples/select-primitive/indicator.tsx
```tsx
import { Icon } from '@luke-ui/react/icon';
import {
SelectIndicator,
SelectItem,
SelectListBox,
SelectPopover,
SelectRoot,
SelectTrigger,
SelectValue,
} from '@luke-ui/react/primitives/select';
import { Stack } from '@luke-ui/react/stack';
export default () => {
return (
Newest first
Oldest first
);
};
```
## Size [#size]
Set `size` on `SelectRoot`, and the trigger, indicator, and items follow. `medium` is the default.
Use `small` in compact layouts.
## Pending [#pending]
Pass `isPending` to `SelectTrigger` while a change is saving. The trigger keeps focus but can't be
pressed or opened, and can't change the value from the trigger, until pending ends.
## Validation [#validation]
Set `isInvalid` or a validation prop on `SelectRoot`. The trigger takes a danger border, and
`FieldError` inside `Field` shows the message and the error icon. See
[Validation](/docs/validation).
## Labels [#labels]
The label takes textual, non-interactive content only. Place a link or button outside it. To name
the select without a visible label, pass `aria-labelledby` or `aria-label` to `SelectRoot`.
## API [#api]
### SelectRootProps [#selectrootprops]
### SelectRootProps
Props for `SelectRoot`.
`SelectRootProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
| Prop | Type | Description |
| ------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `aria-label?` | `string` | Defines a string value that labels the current element. |
| `aria-labelledby?` | `string` | Identifies the element (or elements) that labels the current element. |
| `aria-describedby?` | `string` | Identifies the element (or elements) that describes the object. |
| `aria-details?` | `string` | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `disabledKeys?` | `object` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `onKeyDown?` | `function` | Handler that is called when a key is pressed. |
| `onKeyUp?` | `function` | Handler that is called when a key is released. |
| `onFocus?` | `function` | Handler that is called when the element receives focus. |
| `onBlur?` | `function` | Handler that is called when the element loses focus. |
| `onFocusChange?` | `function` | Handler that is called when the element's focus status changes. |
| `slot?` | `union` | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| `isOpen?` | `union` | Sets the open state of the menu. |
| `defaultOpen?` | `union` | Sets the default open state of the menu. |
| `allowsEmptyCollection?` | `union` | Whether the select should be allowed to be open when the collection is empty. |
| `autoComplete?` | `string` | Describes the type of autocomplete the browser may offer for the hidden form control. |
| `autoFocus?` | `union` | Whether the select should receive focus on render. |
| `form?` | `string` | The `