Select

A custom dropdown for choosing one option from a list.

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

Status

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/select.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/select

Usage

example.tsx

1import { Select } from "@/components/dashral/select"
2
3<Select
4  label="Status"
5  placeholder="Pick a status"
6  options={[
7    { value: "active", label: "Active" },
8    { value: "paused", label: "Paused" },
9    { value: "archived", label: "Archived" },
10  ]}
11/>

Examples

Groups and an error

Groups are { label, options }; a separator goes between them.

Timezone

Pick the timezone your reports should use.

Icons and descriptions

An option can carry an icon and a description; only its label shows in the trigger.

Assignee

Who gets the follow-up.

API reference

Select

Also takes every prop of Radix Select(opens in a new tab).

Prop	Type	Default
`value / defaultValue`	`string`	—
`onValueChange`	`(value: string) => void` Called with the new value.	—
`options`	`(string \| { value; label?; description?; icon?; disabled? } \| { label?; options })[]` The choices, or groups of them (a line between groups). Required.	—
`placeholder`	`ReactNode` Shown while nothing is picked.	—
`prefix`	`ReactNode` Inside the trigger before the value, e.g. an icon.	—
`size`	`"default" \| "sm"` The trigger's height.	`"default"`
`side`	`"top" \| "bottom"` Which side the list opens on.	`"bottom"`
`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.	—
`className`	`string` The trigger's classes.	—

Keyboard

Keys	Action
`Enter`or`Space`or`↓`	Open
`↓`or`↑`or`Letters`	Move
`Enter`	Pick
`Escape`	Close

Accessibility

A combobox button and a listbox, both labelled. Use NativeSelect for very long lists on phones.
With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.

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.