← Frontic UI
native-select

Native Select

The browser's own select, for choices autofill or the phone's picker should fill, such as a country in an address; mutes the empty option as a placeholder.

States: Default, Focus, Disabled, Invalid

Parts

PartFileDoes
NativeSelectNativeSelect.vueLets the user pick one option from a list using the browser's own picker.
NativeSelectOptGroupNativeSelectOptGroup.vueGroups related options of the native select under a shared heading.
NativeSelectOptionNativeSelectOption.vueOffers one choice the user can pick in the native select.

Anatomy

<NativeSelect>
  <NativeSelectOption />
</NativeSelect>

Styling

PartRecipe
NativeSelectnative-select-root
NativeSelectnative-select
NativeSelectnative-select-chevron
NativeSelectOptGroupnative-select-option
NativeSelectOptionnative-select-option

Install

Writes 4 files into components/ui/native-select/. For agents, npx @frontic/ui docs native-select prints this reference as markdown; the MCP server serves the same.

npm packages
@lucide/vue
@vueuse/core
class-variance-authority
reka-ui

API reference

NativeSelect NativeSelect.vue

Lets the user pick one option from a list using the browser's own picker. Renders a <div>.

PropTypeDefault
modelValueAcceptableValue | AcceptableValue[]—
classClassValue—
size'md' | 'sm'—
EventPayload
update:modelValue—
Data attributeValues
data-size'md' | 'sm'
Recipe native-select-rootSets
base: native-select-root 1 property
disabledshared state 1 property
Recipe native-selectSets
base: native-select 17 properties · 12 inherited
size: mddefault 1 property
size: sm 1 property
Recipe native-select-chevronSets
base: native-select-chevron 2 properties

NativeSelectOptGroup NativeSelectOptGroup.vue

NativeSelectOption NativeSelectOption.vue

Example
State