Select

A component that displays a select form input using Medusa's design system.

In this guide, you'll learn how to use the Select component.

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#

Examples#

Small Select#

Select Item-Aligned Position#

Disabled Select#

Select with Grouped Items#

Controlled Select#

Empty Values#

A Select.Item can't have an empty string as its value prop. If you do, you'll get the error A <Select.Item /> must have a value prop that is not an empty string. This is because the Select reserves the empty string to clear the selection and show the placeholder.

To add an option like None, use a non-empty placeholder value, then convert it in your change handler:

Code
1<Select2  onValueChange={(value) =>3    handleChange(value === "none" ? null : value)4  }5>6  <Select.Trigger>7    <Select.Value placeholder="Placeholder" />8  </Select.Trigger>9  <Select.Content>10    <Select.Item value="none">None</Select.Item>11    {items.map((item) => (12      <Select.Item key={item.value} value={item.value}>13        {item.label}14      </Select.Item>15    ))}16  </Select.Content>17</Select>