Native Select

A styled native HTML select element with consistent design system integration.

<select class="select w-[180px]" aria-label="Fruit">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="blueberry">Blueberry</option>
  <option value="pineapple">Pineapple</option>
</select>

For a custom listbox with richer styling and JavaScript behavior, see the Select component.

Usage

Add the select class to a native <select>. Use standard <option> and <optgroup> elements.

<select class="select w-[180px]" aria-label="Fruit">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="blueberry">Blueberry</option>
  <option value="pineapple">Pineapple</option>
</select>

Examples

Groups

<select class="select w-[220px]" aria-label="Food">
  <option value="">Select food</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="potato">Potato</option>
    <option value="tomato">Tomato</option>
  </optgroup>
</select>

Disabled

<select class="select w-[220px]" aria-label="Fruit" disabled>
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

Invalid

Fruit

Select a fruit to continue.

<div role="group" class="field" data-invalid="true">
  <label for="native-select-invalid">Fruit</label>
  <select id="native-select-invalid" class="select w-full" aria-invalid="true" aria-describedby="native-select-invalid-error">
    <option value="">Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </select>
  <p id="native-select-invalid-error" class="field-error">Select a fruit to continue.</p>
</div>

Size

<div class="flex flex-wrap items-center gap-3">
  <select class="select w-[180px]" aria-label="Default size">
    <option>Default</option>
    <option>Apple</option>
    <option>Banana</option>
  </select>
  <select class="select w-[180px]" data-size="sm" aria-label="Small size">
    <option>Small</option>
    <option>Apple</option>
    <option>Banana</option>
  </select>
</div>

RTL

Native select supports document direction. Set dir="rtl" on the select or a parent element.

<select dir="rtl" class="select w-[220px]" aria-label="الفاكهة">
  <option value="">اختر فاكهة</option>
  <option value="apple">تفاح</option>
  <option value="banana">موز</option>
  <option value="blueberry">توت</option>
</select>

Native Select vs Select

Use Native Select for native browser behavior, better performance, form integration, and mobile-optimized pickers.
Use Select for a custom popover, richer option content, multi-select behavior, or custom JavaScript APIs.