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