Design System/Atoms/Select

Select

Dropdown list for choosing a single option. Custom Radix-based component with grouped and native variants.

When To Use

  • Use Select when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Key exports

SelectRoot, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem

Example Code

import {
  Select, SelectTrigger, SelectValue,
  SelectContent, SelectItem, SelectLabel, SelectGroup,
} from "@hilum/ui"

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select voice..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="roger">Roger</SelectItem>
    <SelectItem value="aria">Aria</SelectItem>
    <SelectItem value="sarah">Sarah</SelectItem>
  </SelectContent>
</Select>

Select · Basic

Single-value dropdown

Custom Radix select with search support

Select · Grouped

Options grouped by category

Use SelectGroup + SelectLabel for categorization

Select · Native

Native HTML select

OS-rendered dropdown, works without JavaScript

Select · Sizes and states

Width variations

Full-width vs fixed-width, disabled state