Select

The select picks one option from a list using the browser's native dropdown. Pair it with a field for a label and description; for a searchable list with custom option rendering, reach for the combobox.

<div class="field">
  <label class="label" for="select-demo-fruit">Fruit</label>
  <select class="select" id="select-demo-fruit">
    <option value="">Select a fruit</option>
    <optgroup label="Fruits">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="blueberry">Blueberry</option>
      <option value="grapes">Grapes</option>
      <option value="pineapple">Pineapple</option>
    </optgroup>
  </select>
  <p class="field-description">Choose your favorite fruit.</p>
</div>

Usage

Add the select class to a <select> element. Options and groups are the native <option> and <optgroup> elements.

Class	Description
`select`	Add to a `<select>` element
`select-sm`	Add to `select` for a compact field

<select class="select">
  <option value="">Select an option</option>
  <option value="one">Option one</option>
  <option value="two">Option two</option>
</select>

Examples

Basic

A bare select with only a placeholder option.

<select class="select">
  <option value="">Select an option</option>
  <option value="one">Option one</option>
  <option value="two">Option two</option>
  <option value="three">Option three</option>
</select>

Groups

Organize options into categories with <optgroup>.

<div class="field">
  <label class="label" for="select-department">Department</label>
  <select class="select" id="select-department">
    <option value="">Select department</option>
    <optgroup label="Engineering">
      <option value="frontend">Frontend</option>
      <option value="backend">Backend</option>
      <option value="devops">DevOps</option>
    </optgroup>
    <optgroup label="Sales">
      <option value="sales-rep">Sales Rep</option>
      <option value="account-manager">Account Manager</option>
      <option value="sales-director">Sales Director</option>
    </optgroup>
    <optgroup label="Operations">
      <option value="support">Customer Support</option>
      <option value="product-manager">Product Manager</option>
      <option value="ops-manager">Operations Manager</option>
    </optgroup>
  </select>
  <p class="field-description">Select your department or area of work.</p>
</div>

Disabled

Add disabled and the select mutes itself and blocks interaction.

<div class="field">
  <label class="label" for="select-disabled">Fruit</label>
  <select class="select" id="select-disabled" disabled>
    <option value="">Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
  </select>
  <p class="field-description">This field is currently disabled.</p>
</div>

Invalid

Set aria-invalid on the select for the error state.

<div class="field">
  <label class="label" for="select-invalid">Fruit</label>
  <select class="select" id="select-invalid" aria-invalid="true">
    <option value="">Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
  </select>
  <p class="field-description">This field contains validation errors.</p>
</div>

Inline

Put the label beside the select with a horizontal field, like a rows per page control.

<div class="field field-horizontal w-fit">
  <label class="label" for="select-rows-per-page">Rows per page</label>
  <select class="select w-20" id="select-rows-per-page">
    <option>10</option>
    <option selected>25</option>
    <option>50</option>
    <option>100</option>
  </select>
</div>