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.

PropTypeDefault
size
"base"
|"small"
"base"
Was this helpful?

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.

PropTypeDefault
position
"item-aligned"
|"popper"
"popper"
sideOffset
number
8
collisionPadding
number
|
Partial
24
Was this helpful?

Examples#


Small#

Was this example helpful?

Item-Aligned Position#

Was this example helpful?

Disabled#

Was this example helpful?

Grouped Items#

Was this example helpful?

Controlled#

Was this example helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break