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

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 section helpful?

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

Was this example helpful?

Disabled

Was this example helpful?

Grouped Items

Was this example helpful?

Controlled

Was this example helpful?