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. It's based on Radix UI Select Trigger.

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. It's based on Radix UI Select Label.

Select.Item

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

Select.Content

The content that appears when the select is open. It's based on Radix UI Select Content.

Examples#

---

Small#

Item-Aligned Position#

Disabled#

Grouped Items#

Controlled#