Select

A select component for choosing from a list of options, ready for CMS integration.

CMSPayload CMS Integration

Select fields can be configured through CMS, allowing content editors to customize labels, placeholders, and options without code changes.

CMS Demo

See how content editors configure select fields in a CMS:

Country *

CMS FieldsEN

Label

Placeholder

Option Labels (4)

Required

Disabled

This simulates how a content editor configures selects in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS select fields with localization

Payload Form Example

// In your Payload CMS form config
export const LocationForm = {
  slug: "location-form",
  fields: [
    {
      name: "countrySelect",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "placeholder", type: "text", localized: true },
        {
          name: "options",
          type: "array",
          fields: [
            { name: "value", type: "text", required: true },
            { name: "label", type: "text", localized: true, required: true },
          ],
        },
        { name: "required", type: "checkbox" },
      ],
    },
  ],
}

Rendering the Form

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@mordecai-design-system/ui"

export function LocationForm({ data }) {
  const field = data.countrySelect
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">
        {field.label}
        {field.required && <span className="text-destructive ml-1">*</span>}
      </label>
      <Select>
        <SelectTrigger>
          <SelectValue placeholder={field.placeholder} />
        </SelectTrigger>
        <SelectContent>
          {field.options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

Installation

pnpm add @corew500/ui

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@mordecai-design-system/ui"

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>

Examples

With Label

<div className="space-y-2">
  <label className="text-sm font-medium">Favorite Fruit</label>
  <Select>
    <SelectTrigger className="w-[200px]">
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
    </SelectContent>
  </Select>
</div>

Disabled

<Select disabled>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Disabled select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
  </SelectContent>
</Select>

With Groups

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
      <SelectItem value="cet">Central European Time (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Sub-components

| Component | Description | |-----------|-------------| | Select | The root component | | SelectTrigger | The button that toggles the select | | SelectValue | Displays the selected value | | SelectContent | The dropdown container | | SelectItem | An individual option | | SelectGroup | Groups related options | | SelectLabel | Label for a group | | SelectSeparator | Visual separator between items |

Props

Select

Prop	Type	Default	Description
`inputRef`	enum	—	A ref to access the hidden input element.
`name`	string	—	Identifies the field when a form is submitted.
`id`	string	—	The id of the Select.
`required`	enum	`false`	Whether the user must choose a value before submitting a form.
`readOnly`	enum	`false`	Whether the user should be unable to choose a different option from the select popup.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`multiple`	enum	`false`	Whether multiple items can be selected.
`highlightItemOnHover`	enum	`true`	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
`defaultOpen`	enum	`false`	Whether the select popup is initially open. To render a controlled select popup, use the `open` prop instead.
`onOpenChange`	(open: boolean, eventDetails: SelectRootChangeEventDetails) => void	—	Event handler called when the select popup is opened or closed.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the select popup is opened or closed.
`open`	enum	—	Whether the select popup is currently open.
`modal`	enum	`true`	Determines if the select enters a modal state when open. - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed.
`actionsRef`	RefObject<SelectRootActions>	—	A ref to imperative actions. - `unmount`: When specified, the select will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the select manually. Useful when the select's animation is controlled by an external library.
`items`	enum	—	Data structure of the items rendered in the select popup. When specified, `<Select.Value>` renders the label of the selected item instead of the raw value. @example ```tsx const items = { sans: 'Sans-serif', serif: 'Serif', mono: 'Monospace', cursive: 'Cursive', }; <Select.Root items={items} /> ```
`itemToStringLabel`	(itemValue: Value) => string	—	When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger. If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
`itemToStringValue`	(itemValue: Value) => string	—	When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission. If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
`isItemEqualToValue`	(itemValue: Value, value: Value) => boolean	—	Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially. Defaults to `Object.is` comparison.
`defaultValue`	SelectValueType<Value, Multiple>	—	The uncontrolled value of the select when it’s initially rendered. To render a controlled select, use the `value` prop instead.
`value`	SelectValueType<Value, Multiple>	—	The value of the select. Use when controlled.
`onValueChange`	(value: SelectValueType<Value, Multiple> \| (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void	—	Event handler called when the value of the select changes.

SelectTrigger

Prop	Type	Default	Description
`disabled`	enum	—	Whether the component should ignore user interaction.
`nativeButton`	enum	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`size`	enum	`default`	Size variant affecting height and spacing

SelectItem

Prop	Type	Default	Description
`value`	any	`null`	A unique value that identifies this select item.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`label`	string	—	Specifies the text label to use when the item is matched during keyboard text navigation. Defaults to the item text content if not provided.
`nativeButton`	enum	`false`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.