Get Started
Product
Resources
Tools & SDKs
Framework
Reference

Select

Displays a list of options for the user to pick from—triggered by a button.

Was this example helpful?

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.

Prop	Type	Default
`size`	`"base"` \|`"small"`	`"base"`

Was this page helpful?

Select.Trigger

The trigger that toggles the select.

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#

Was this example helpful?

Disabled#

Was this example helpful?

Grouped Items#

Was this example helpful?

Controlled#

Was this example helpful?