All components

Native Select

Browser-native select, uses the OS picker on mobile.

Full API on ui.shadcn.com

Default

Uses the browser's built-in select. On mobile, iOS shows the wheel picker and Android shows the native menu. Reach for this over Select when the surface is mobile-heavy, the list is long (countries, timezones, phone-book-style enumerations), or options don't need custom layouts. Use Select when you need icons, group labels, descriptions, or rich item layouts on desktop-first UIs.

<NativeSelect className="w-60" defaultValue="">
  <NativeSelectOption value="" disabled>
    Pick a country
  </NativeSelectOption>
  <NativeSelectOption value="gb">United Kingdom</NativeSelectOption>
  <NativeSelectOption value="us">United States</NativeSelectOption>
  <NativeSelectOption value="ca">Canada</NativeSelectOption>
</NativeSelect>

With groups

<NativeSelect className="w-60" defaultValue="">
  <NativeSelectOption value="" disabled>Pick a region</NativeSelectOption>
  <NativeSelectOptGroup label="Europe">
    <NativeSelectOption value="gb">United Kingdom</NativeSelectOption>
    <NativeSelectOption value="ie">Ireland</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Americas">
    <NativeSelectOption value="us">United States</NativeSelectOption>
    <NativeSelectOption value="ca">Canada</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>