Combobox

A searchable select — type to filter a long list of options.

$ pnpm dlx shadcn@latest add https://dashral.com/r/combobox.json

City

Selected value: bandung

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/combobox.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/combobox

Usage

example.tsx

1import { Combobox } from "@/components/dashral/combobox"
2
3<Combobox
4  label="Country"
5  placeholder="Pick a country"
6  options={[
7    { value: "id", label: "Indonesia" },
8    { value: "sa", label: "Saudi Arabia" },
9    { value: "us", label: "United States" },
10  ]}
11/>

Examples

Assignee

Avatars in the list and the field; the email is searched too. Picking the same person again unassigns.

ENG-1042

Redesign the checkout flow

Assignee

Country with flags

icon and description on each option; the pick sets the phone field's dialing code.

Country

Phone

+62

API reference

Combobox

Prop	Type	Default
`options`	`{ value, label, icon?, description?, disabled? }[]` What can be picked. Required. icon sits before the label (an avatar, a flag), also in the field once picked; description is a second line, searched too.	—
`value / defaultValue`	`string` Picked value, controlled or initial. Picking it again clears it.	`""`
`onValueChange`	`(value: string) => void` Called with the new value.	—
`placeholder / searchPlaceholder / emptyText`	`string` Texts for the button, the search field and no results.	—
`id / disabled / aria-label / className`	Passed to the trigger button.	—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, trigger, content, item }` Classes for each part.	—

Keyboard

Keys	Action
`Enter`or`Space`or`↓`	Open the list (on the button)
`Type`	Filter the list
`↓`or`↑`	Move through the options
`Enter`	Pick the highlighted option
`Escape`	Close

Accessibility

The trigger is role="combobox" with aria-expanded; options are role="option" with the highlighted one marked.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.