Selects

React’s Select is a Base UI compound primitive (Select.Trigger, Select.Popup, Select.Item) with a custom popup. Vanilla falls back to a native <select> styled with .select — the popup chrome itself can only be customized in React.

Examples

Default

Select a status… Open In progress Closed

Vanilla CSS

<select class="select select-bordered">
  <option value="">Select a status…</option>
  <option value="open">Open</option>
  <option value="in-progress">In progress</option>
  <option value="closed">Closed</option>
</select>

React

<Select name="status">
  <Select.Trigger>
    <Select.Value placeholder="Select a status…" />
    <Select.Icon />
  </Select.Trigger>
  <Select.Popup>
    <Select.Item value="open">
      Open
      <Select.ItemIndicator />
    </Select.Item>
    <Select.Item value="in-progress">
      In progress
      <Select.ItemIndicator />
    </Select.Item>
    <Select.Item value="closed">
      Closed
      <Select.ItemIndicator />
    </Select.Item>
  </Select.Popup>
</Select>

Sizes

Small Medium Large

Vanilla CSS

<select class="select select-bordered select-sm">
  <option>Small</option>
</select>
<select class="select select-bordered">
  <option>Medium</option>
</select>
<select class="select select-bordered select-lg">
  <option>Large</option>
</select>

React

<Select defaultValue="sm">
  <Select.Trigger triggerSize="sm">
    <Select.Value />
    <Select.Icon />
  </Select.Trigger>
  <Select.Popup>
    <Select.Item value="sm">Small</Select.Item>
    <Select.Item value="md">Medium</Select.Item>
    <Select.Item value="lg">Large</Select.Item>
  </Select.Popup>
</Select>

Groups

Apple Banana Carrot Daikon

Vanilla CSS

<select class="select select-bordered">
  <optgroup label="Fruit">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Veg">
    <option>Carrot</option>
    <option>Daikon</option>
  </optgroup>
</select>

React

<Select>
  <Select.Trigger>
    <Select.Value placeholder="Pick one…" />
    <Select.Icon />
  </Select.Trigger>
  <Select.Popup>
    <Select.Group>
      <Select.GroupLabel>Fruit</Select.GroupLabel>
      <Select.Item value="apple">
        Apple
        <Select.ItemIndicator />
      </Select.Item>
      <Select.Item value="banana">
        Banana
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Group>
    <Select.Group>
      <Select.GroupLabel>Veg</Select.GroupLabel>
      <Select.Item value="carrot">
        Carrot
        <Select.ItemIndicator />
      </Select.Item>
      <Select.Item value="daikon">
        Daikon
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Group>
  </Select.Popup>
</Select>

Disabled

Disabled

Vanilla CSS

<select class="select select-bordered" disabled>
  <option>Disabled</option>
</select>

React

<Select disabled defaultValue="x">
  <Select.Trigger>
    <Select.Value />
    <Select.Icon />
  </Select.Trigger>
  <Select.Popup>
    <Select.Item value="x">Disabled</Select.Item>
  </Select.Popup>
</Select>

Inside a Field

Role Pick a role… Admin Member

Vanilla CSS

<div class="field">
  <label class="field-label" for="role">Role</label>
  <select id="role" class="select select-bordered" required>
    <option value="">Pick a role…</option>
    <option value="admin">Admin</option>
    <option value="member">Member</option>
  </select>
</div>

React

<Field name="role">
  <Field.Label>Role</Field.Label>
  <Select required>
    <Select.Trigger>
      <Select.Value placeholder="Pick a role…" />
      <Select.Icon />
    </Select.Trigger>
    <Select.Popup>
      <Select.Item value="admin">
        Admin
        <Select.ItemIndicator />
      </Select.Item>
      <Select.Item value="member">
        Member
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Popup>
  </Select>
  <Field.Error match="valueMissing">Pick a role.</Field.Error>
</Field>