Native Select

The browser's own select element, styled.

shadcn/uinew-york-v4 · synced Aug 29, 2026

Installation

import {
  NativeSelect,
  NativeSelectOption,
  NativeSelectOptGroup,
} from "@aspyn-io/kit";

Renders the browser's own dropdown — ideal for long lists, mobile, and progressive enhancement. Group options with NativeSelectOptGroup.

Fruit

A compact sm variant matches dense toolbars and filters.

Use NativeSelect over Select when you want the OS-native dropdown: long option lists, mobile ergonomics, or forms that must work without JavaScript. Reach for Select (Radix listbox) when you need rich item content, search, or custom styling of the open list.
Label it yourself via <Label htmlFor> or aria-label — like a raw <select>, it takes no name from its options. Pass aria-invalid to surface the destructive state.
Options carry Canvas system colors so the open dropdown popup follows the OS light/dark appearance, which CSS can't fully control.