Select

A component that displays a select form input using Medusa's design system.

In this guide, you'll learn how to use the Select component.

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

Select Item-Aligned Position#

Disabled Select#

Select with Grouped Items#

Controlled Select#