NativeSelect

A native HTML select element with consistent styling. Uses the browser's built-in dropdown for maximum mobile compatibility. Ideal for forms where the system picker is preferred over a custom dropdown.

Anatomy

<NativeSelect> wraps a native <select> inside a styled container with a custom chevron icon. Uses <NativeSelectOption> for options and supports <NativeSelectOptGroup> for grouping.

Examples

Basic

With label

Disabled

Design Guidelines

Do

  • Use for mobile-friendly forms. The native picker is optimized for touch devices and assistive technology.
  • Use when no custom styling is needed. If the system dropdown is acceptable, native is simpler and more accessible.
  • Include a blank default option. "Select a..." as the first option guides users.

Don't

  • Don't use when you need custom option rendering. For rich content in options, use Select or Combobox.
  • Don't use for searchable lists. Native selects don't support type-to-filter well on desktop.
  • Don't mix with custom Select in the same form. Consistency matters — pick one pattern.

Developer Reference

Accessibility

  • Uses native <select>— full browser/OS accessibility built-in.
  • Responsive sizing: h-8 sm:h-9 lg:h-10.
  • Custom chevron icon positioned absolutely at right-2.5.
  • aria-invalid triggers destructive ring styling.
  • Selected option uses primary color background.

Usage

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

<NativeSelect>
  <NativeSelectOption value="">Select a country</NativeSelectOption>
  <NativeSelectOption value="us">United States</NativeSelectOption>
  <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
</NativeSelect>

// With optgroup
<NativeSelect>
  <NativeSelectOptGroup label="Fruits">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Vegetables">
    <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>