import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Select, }

{metadata.title}

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

import { Select } from "@medusajs/ui"

<Select>
  <Select.Trigger>
    <Select.Value placeholder="Placeholder" />
  </Select.Trigger>
  <Select.Content>
    {items.map((item) => (
      <Select.Item key={item.value} value={item.value}>
        {item.label}
      </Select.Item>
    ))}
  </Select.Content>
</Select>

API Reference

<ComponentReference mainComponent="Select" componentsToShow={[ "Select", "Select.Trigger", "Select.Value", "Select.Group", "Select.Label", "Select.Item", "Select.Content" ]} />

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:

<Select
  onValueChange={(value) =>
    handleChange(value === "none" ? null : value)
  }
>
  <Select.Trigger>
    <Select.Value placeholder="Placeholder" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="none">None</Select.Item>
    {items.map((item) => (
      <Select.Item key={item.value} value={item.value}>
        {item.label}
      </Select.Item>
    ))}
  </Select.Content>
</Select>