Select
Displays a list of options for the user to pick from—triggered by a button.
Was this example helpful?
Usage
import { Select } from "@medusajs/ui"
1<Select>2 <Select.Trigger>3 <Select.Value placeholder="Placeholder" />4 </Select.Trigger>5 <Select.Content>6 {items.map((item) => (7 <Select.Item key={item.value} value={item.value}>8 {item.label}9 </Select.Item>10 ))}11 </Select.Content>12</Select>
API Reference
This component is based on Radix UI Select.
Select
Contains all the parts of the select component.
Prop | Type | Default |
---|---|---|
size | enum | "base" |
Was this section helpful?
Select.Trigger
The trigger that toggles the select.
Select.Value
Displays the selected value, or a placeholder if no value is selected.
Prop | Type | Default |
---|---|---|
placeholder | string | - |
Was this section helpful?
Select.Group
Groups multiple items together.
Select.Label
Used to label a group of items.
Select.Item
An item in the select.
Prop | Type | Default |
---|---|---|
value | string | - |
Was this section helpful?
Examples
Small
Was this example helpful?
Disabled
Was this example helpful?
Grouped Items
Was this example helpful?
Controlled
Was this example helpful?