Select
Dropdown select: click to open, pick an option, and the trigger label updates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | — | Array of { value, label } items. |
value | string | — | Controlled selected value. |
defaultValue | string | — | Initial uncontrolled value. |
onChange | (value: string) => void | — | Change handler, called with the selected value. |
placeholder | ReactNode | — | Displayed when no option is selected. |
size | "sm" | "md" | — | Trigger button size. |
caret | boolean | — | Show the chevron caret. Defaults to true. |
className | string | — | Applied to the dropdown panel. |
triggerClassName | string | — | Applied to the trigger button. |
renderOption | (option: SelectOption, state: { selected: boolean }) => ReactNode | — | Custom option content. Retains MenuItem semantics, selection highlight, and hover styling. |
renderValue | (option: SelectOption | null) => ReactNode | — | Replaces the trigger's contents. Receives null when nothing is chosen yet and the placeholder would otherwise show. |
Usage
Select accepts SelectOption entries and manages the open panel, outside-click dismissal, and selected-option highlight.
Basic
Sizes
Custom placeholder
import { Select } from "@solarius/onset";
import type { SelectOption } from "@solarius/onset";
const regions: SelectOption[] = [
{ value: "us-east-1", label: "us-east-1 (N. Virginia)" },
{ value: "us-west-2", label: "us-west-2 (Oregon)" },
];
<Select options={regions} value={value} onChange={setValue} />
<Select options={regions} placeholder="Choose a region..." />
<Select options={regions} size="sm" />