Skip to main content

​
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

npm install @araf-ds/core

​
Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Select onValueChange={(val) => console.log(val)}>
      <SelectTrigger label="Country" placeholder="Select country" />
      <SelectContent>
        <SelectItem value="id">Indonesia</SelectItem>
        <SelectItem value="sg">Singapore</SelectItem>
        <SelectItem value="my">Malaysia</SelectItem>
      </SelectContent>
    </Select>
  )
}

​
Variants

​
Basic Select

Select country▾
<Select onValueChange={(val) => console.log(val)}>
  <SelectTrigger label="Country" placeholder="Select country" />
  <SelectContent>
    <SelectItem value="id">Indonesia</SelectItem>
    <SelectItem value="sg">Singapore</SelectItem>
    <SelectItem value="my">Malaysia</SelectItem>
  </SelectContent>
</Select>

​
With Selected Value

Indonesia▾
<Select defaultValue="id">
  <SelectTrigger label="Country" />
  <SelectContent>
    <SelectItem value="id">Indonesia</SelectItem>
    <SelectItem value="sg">Singapore</SelectItem>
  </SelectContent>
</Select>

​
Grouped Options

Select role▾
MANAGEMENT
Administrator
Manager
OPERATIONAL
Editor
Viewer (disabled)
<Select>
  <SelectTrigger label="Role" placeholder="Select role" />
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Management</SelectLabel>
      <SelectItem value="admin">Administrator</SelectItem>
      <SelectItem value="manager">Manager</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Operational</SelectLabel>
      <SelectItem value="editor">Editor</SelectItem>
      <SelectItem value="viewer" disabled>Viewer</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

​
Error State

Select department▾
Please select a department
<Select>
  <SelectTrigger
    label="Department"
    placeholder="Select department"
    state="error"
    helperText="Please select a department"
  />
  <SelectContent>
    <SelectItem value="eng">Engineering</SelectItem>
    <SelectItem value="design">Design</SelectItem>
  </SelectContent>
</Select>

​
Disabled

Select region▾
<Select disabled>
  <SelectTrigger label="Region" placeholder="Select region" state="disabled" />
  <SelectContent>
    <SelectItem value="asia">Asia Pacific</SelectItem>
  </SelectContent>
</Select>

​
States

StateBorderRingHelper text color
Default#D0D5DD—#667085
Focus#0479CE#CDE4F5 4px—
Error#DC2626—#B42318
Disabled#E5E7EB——

​
API Reference

​
Select (Root)

​
value
string
Controlled selected value.
​
onValueChange
(value: string) => void
Callback fired when the selected value changes.
​
defaultValue
string
Uncontrolled default selected value.
​
disabled
boolean
default:"false"
Disables the entire select component.

​
SelectTrigger

​
label
string
Label displayed above the trigger.
​
placeholder
string
default:"Select..."
Placeholder text shown when nothing is selected.
​
state
string
default:"default"
Validation state. Values: default · error · disabled
​
helperText
string
Helper or error message displayed below the trigger.

​
SelectItem

​
value
string
The option value (required).
​
disabled
boolean
default:"false"
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

Do

  • 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

  • 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