Combobox
A searchable select input. Users can type to filter the option list. Supports descriptions, avatars, status indicators, and composing inside a Field.
Atom
Input · Select
When To Use
- Use Combobox 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
Props
options, value, onValueChange, placeholder, searchPlaceholder, emptyText
Example Code
import { Combobox } from "@hilum/ui"
const frameworks = [
{ value: "next", label: "Next.js" },
{ value: "remix", label: "Remix" },
{ value: "astro", label: "Astro" },
]
function Example() {
const [value, setValue] = useState("")
return (
<Combobox
options={frameworks}
value={value}
onValueChange={setValue}
placeholder="Select framework..."
/>
)
// ...trimmed for docsCombobox · Basic
Simple
Select from a filtered list
Combobox · With descriptions
Options with sub-labels
Each item has a secondary description
Combobox · With avatars
Person picker with initials
Avatar initials shown in trigger and dropdown
Combobox · With status indicator
Status dot per option
Colored dot shows online/busy/away/offline
Combobox · In a Field
Composed with Field
Works with label, hint, and error
Type to filter team members.