Components
Select
Displays a list of options for the user to pick from—triggered by a button.
Usage
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@murasakijs/ui";<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
</SelectContent>
</Select>API Reference
Subcomponents
| Component | Description |
|---|---|
Select | The root primitive. Accepts value, defaultValue, onValueChange, disabled, name, required. |
SelectGroup | Groups related SelectItems together. |
SelectValue | Displays the selected value, or placeholder when empty. |
SelectTrigger | The button that opens the popup. |
SelectContent | The popup itself. Accepts position ("item-aligned" | "popper", default "popper"). |
SelectLabel | A non-interactive label inside SelectContent/SelectGroup. |
SelectItem | A selectable option. Accepts value (required) and disabled. |
SelectSeparator | A visual divider between items or groups. |
SelectScrollUpButton / SelectScrollDownButton | Scroll affordances rendered automatically inside SelectContent. |
Selection state, typeahead, keyboard navigation, and overlay positioning are provided by React Aria Components.