Select

Choose one option from a styled list.

import { Select } from "@merid/react";

export function Example() {
  return (
    <>
      <span id="region-label">Region</span>
      <Select.Root defaultValue="eu-west" name="region">
        <Select.Trigger aria-labelledby="region-label" />
        <Select.Content>
          <Select.Item value="us-east">US East</Select.Item>
          <Select.Item value="us-west">US West</Select.Item>
          <Select.Item value="eu-west">EU West</Select.Item>
          <Select.Item value="ap-south" disabled>
            Asia Pacific (soon)
          </Select.Item>
        </Select.Content>
      </Select.Root>
    </>
  );
}

Import

import { Select } from "@merid/react";

Anatomy

<Select.Root>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="a">A</Select.Item>
  </Select.Content>
</Select.Root>

• Root holds the value and open state, and renders a hidden <input> when name is set.
• Trigger is the role="combobox" button. It shows the selected label or the placeholder.
• Content is the portalled role="listbox". It stays mounted (hidden) so options can report their labels.
• Item is one role="option". Its text children are the label, shown in the trigger and used for typeahead.

Examples

Controlled

Pass value and onValueChange. An empty string means nothing is selected and shows the placeholder.

const [plan, setPlan] = useState("");

<Select.Root value={plan} onValueChange={setPlan} placeholder="Choose a plan">
  <Select.Trigger aria-label="Plan" invalid={plan === ""} />
  <Select.Content>
    <Select.Item value="starter">Starter</Select.Item>
    <Select.Item value="team">Team</Select.Item>
    <Select.Item value="enterprise">Enterprise</Select.Item>
  </Select.Content>
</Select.Root>

Sizes and disabled

<Select.Trigger size="sm" aria-label="Frequency" />
<Select.Trigger size="md" aria-label="Frequency" />
<Select.Trigger size="lg" aria-label="Frequency" />

<Select.Root disabled placeholder="Disabled">
  <Select.Trigger aria-label="Disabled select" />
  <Select.Content>
    <Select.Item value="x">Unavailable</Select.Item>
  </Select.Content>
</Select.Root>

In a form

Set name (and optionally required and form) on Root. A hidden input carries the value on submit.

<form>
  <Select.Root name="region" required>
    <Select.Trigger aria-label="Region" />
    <Select.Content>…</Select.Content>
  </Select.Root>
</form>

API reference

Root

Trigger

Accepts every <button> attribute except value. Children, when given, replace the displayed label. An id you pass is kept (so <label htmlFor> works) and the listbox stays labelled by it. Inside a Field the trigger picks up the wiring like every Merid control: the field's id and label (aria-labelledby), aria-describedby for the description and error, aria-invalid + data-invalid, aria-required and disabled. Explicit props win.

Content

Accepts every <div> attribute. The listbox matches the trigger's width.

Item

Accepts every <div> attribute except children. Your onClick and onPointerMove run first; call event.preventDefault() in them to skip selecting or highlighting the option.

Styling

The trigger height comes from --mrd-select-height, set per data-size.

Accessibility

Follows the WAI-ARIA Select-Only Combobox pattern. Focus stays on the trigger; the highlighted option is exposed through aria-activedescendant. Give the trigger an accessible name with aria-label, aria-labelledby, or an id referenced by a <label htmlFor>.

Guidelines

Related

• NativeSelect — the platform <select>, best on mobile and for long lists.
• DropdownMenu — actions, not values.
• Field — label, hint and error around a control.