Native Select or Select?

Native for plain text options and mobile; Select for icons, groups and custom rendering.

Forms

Native Select

A styled native select: platform pickers, autofill, zero JavaScript.

Native Select styles the browser's own select: people get the platform picker on mobile, autofill and form submission work for free, and it ships no JavaScript. It suits long forms and mobile-heavy pages.

Preview

Country

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/native-select.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/native-select.

Usage

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

<NativeSelect name="country">
  <option value="in">India</option>
</NativeSelect>

API reference

NativeSelect

Extends native <select> props.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height.

Accessibility

Native semantics, keyboard and screen-reader support.

FAQ

Also searched as: styled native select · custom select css · html select tailwind · mobile friendly select · shadcn native select