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

This component is based on Radix UI Select.

Select

Contains all the parts of the select component.

PropTypeDefault
size
enum
"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.

PropTypeDefault
placeholderstring-
Was this section helpful?

Select.Group

Groups multiple items together.

Select.Label

Used to label a group of items.

Select.Item

An item in the select.

PropTypeDefault
valuestring-
Was this section helpful?

Examples

Small

Was this example helpful?

Disabled

Was this example helpful?

Grouped Items

Was this example helpful?

Controlled

Was this example helpful?