Select

Usage#

---

Code
import { Select } from "@medusajs/ui"

Code
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#

---

Select

This component is based on Radix UI Select. It also accepts all props of the HTML select component.

Select.Trigger

The trigger that toggles the select.

Select.Value

Displays the selected value, or a placeholder if no value is selected. It's based on Radix UI Select Value.

Select.Group

Groups multiple items together.

Select.Label

Used to label a group of items.

Select.Item

An item in the select. It's based on Radix UI Select Item and accepts its props.

Examples#

---

Small#

Disabled#

Grouped Items#

Controlled#