Clinia UI

Native Select

The browser's own select, styled. Use it on mobile-first forms or for long, simple lists.

shadcn docs →

When to use

  • Pick one option on a mobile-first form, where the phone's own picker is easier than a popup.
  • A long list of plain text options, such as provinces or countries, with no icons or search.

When not to use

  • Options with icons, descriptions or groups you need to style: use Select.
  • A list users search by typing: use Combobox.
  • Two to four options: use Radio Group.

Install

npx shadcn@latest add @clinia/native-select

Anatomy

  1. 1Selectdata-slot="native-select"border-input · rounded-lg
  2. 2Chevrondata-slot="native-select-icon"size-4 · text-muted-foreground

Clinia rules

  • It shares the Input boundary and the Trust focus ring, so it sits in a form next to inputs and selects.
  • size="sm" (32px) is for toolbars and table filters. Use default (36px) in forms.
  • The open list is drawn by the browser and follows the system colours (Canvas, CanvasText), not the site theme. Don't try to restyle it.
  • className styles the wrapper, not the select: set widths there. id, name and the other props reach the select.

Do and don't

Do keep a visible label above the select.
Don't use the first option as the only label.

States

default
invalid
disabled
focus
size sm

Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.

Accessibility

Built in

  • The resting border is the input token, like Input and Select, so it clears 3:1 on the page and on cards.
  • It's a real <select>, so the browser handles the keyboard, the screen reader and the phone's picker. The chevron is aria-hidden.

Your responsibility

  • Label it: a visible Label with htmlFor set to the select's id, or an aria-label when the context already names it.
  • Don't use a first option such as Select… as the label. If no value is chosen yet, make that option disabled and keep the real label above.

How to test

  1. Press Tab to reach it: the Trust ring appears.
  2. Press Arrow Down: the value changes, or the list opens, depending on the browser. Type a letter: it jumps to the first match.
  3. On a phone, tap it: the system picker opens.
  4. With a screen reader, it announces the label, the current value and the control type.

API

PropValuesDefaultDescription
size
smdefault
default

sm (32px) for toolbars and table filters.

All other props come from the native select element.

Related