Primitives
Select
Dropdown select input for choosing a single value from a list of options. Supports label, placeholder, error state, and multiple visual variants.
Live Demo
Interactive Select
Installation
npm install @trinkui/reactImport
import { Select } from "@trinkui/react";Usage
<Select
label="Framework"
placeholder="Select a framework"
options={[
{ value: "react", label: "React" },
{ value: "vue", label: "Vue" },
{ value: "angular", label: "Angular" },
{ value: "svelte", label: "Svelte" },
]}
/>Variants
<Select variant="default" label="Default" options={options} />
<Select variant="filled" label="Filled" options={options} />
<Select variant="ghost" label="Ghost" options={options} />Sizes
<Select size="sm" options={options} />
<Select size="md" options={options} />
<Select size="lg" options={options} />Error State
Please select a country.
<Select
label="Country"
placeholder="Select a country"
error="Please select a country."
options={countries}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: string }[] | -- | Array of selectable options |
| value | string | -- | Controlled selected value |
| defaultValue | string | -- | Initial value (uncontrolled) |
| onChange | (value: string) => void | -- | Callback when the selection changes |
| placeholder | string | -- | Placeholder text when no option is selected |
| label | string | -- | Label text displayed above the select |
| error | string | -- | Error message; applies error border styling when set |
| disabled | boolean | false | Disable the select |
| variant | "default" | "filled" | "ghost" | "default" | Visual style variant |
| size | "sm" | "md" | "lg" | "md" | Size of the select element |
Accessibility
- Uses a native
<select>element for full keyboard and screen reader support. - Label is associated with the select via
htmlFor/idpairing. - Error messages are linked with
aria-describedby. - Arrow keys, Enter, and Space work natively for option navigation.