Select
Displays a list of options for the user to pick from—triggered by a button.
import {Select,SelectContent,SelectItem,SelectTrigger,SelectValue,} from "@murasakijs/ui";export function SelectDemo() {return ( <Select> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Select a fruit" /> </SelectTrigger> <SelectContent> <SelectItem value="apple">Apple</SelectItem> <SelectItem value="banana">Banana</SelectItem> <SelectItem value="blueberry">Blueberry</SelectItem> </SelectContent> </Select>);}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. |
All subcomponents wrap Radix UI's Select
primitives and forward every other prop.