> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Select
> A dropdown selector for choosing one option from a list — supports labels, grouped options, placeholder, and validation states.
## Overview
Select country▾
Default
Indonesia▾
Focus
Select department▾
⚠ Please select a department
**Select** provides a styled dropdown for single-option selection. It supports grouped options, searchable filtering, disabled items, and validation states via a trigger + content popover pattern.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Basic Select
Select country▾
```tsx theme={null}
```
### With Selected Value
Indonesia▾
```tsx theme={null}
```
### Grouped Options
Select role▾
MANAGEMENT
Administrator
Manager
OPERATIONAL
Editor
Viewer (disabled)
```tsx theme={null}
```
### Error State
Select department▾
Please select a department
```tsx theme={null}
```
### Disabled
Select region▾
```tsx theme={null}
```
***
## States
| State | Border | Ring | Helper text color |
| -------- | --------- | ------------- | ----------------- |
| Default | `#D0D5DD` | — | `#667085` |
| Focus | `#0479CE` | `#CDE4F5` 4px | — |
| Error | `#DC2626` | — | `#B42318` |
| Disabled | `#E5E7EB` | — | — |
***
## API Reference
### Select (Root)
Controlled selected value.
Callback fired when the selected value changes.
Uncontrolled default selected value.
Disables the entire select component.
### SelectTrigger
Label displayed above the trigger.
Placeholder text shown when nothing is selected.
Validation state. Values: `default` · `error` · `disabled`
Helper or error message displayed below the trigger.
### SelectItem
The option value (required).
Disables this specific option.
***
## Accessibility
* Select uses `role="combobox"` on the trigger and `role="listbox"` on the content
* Keyboard navigation: Arrow keys move between options, Enter/Space selects, Escape closes
* Selected option is marked with `aria-selected="true"`
* Disabled options use `aria-disabled="true"` and are skipped by keyboard navigation
* Label is associated with the trigger via `aria-labelledby`
* Error messages are linked via `aria-describedby`
***
## Do's & Don'ts
* Use Select for 5+ options where a Radio Group would be too long
* Always include a descriptive label above the trigger
* Use grouped options when the list has multiple logical categories
* Show an error state with a clear helper text on validation failure
* Don't use Select for fewer than 3–4 options — use Radio Group instead
* Don't use placeholder as a substitute for a label
* Don't disable the entire Select without explaining why
* Don't put more than 20 options in a flat list — use grouping or search