Native Select

Use the browser’s built-in select control with consistent styling.

View component source ↗

Preview

Example

A minimal example to get started.

Installation

Install this component and its dependencies in a project initialized with shadcn.

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

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

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

export default function Example() {
  return (
    <NativeSelect aria-label="Choose a region" defaultValue="asia">
      <NativeSelectOption value="asia">Asia</NativeSelectOption>
      <NativeSelectOption value="europe">Europe</NativeSelectOption>
      <NativeSelectOption value="americas">Americas</NativeSelectOption>
    </NativeSelect>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

NativeSelect

NativeSelect properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`ref`	React.Ref<HTMLSelectElement> \| undefined React.Ref<HTMLSelectElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLSelectElement> \| undefined React.FocusEventHandler<HTMLSelectElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLSelectElement> \| undefined React.FocusEventHandler<HTMLSelectElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLSelectElement, HTMLSelectElement> \| undefined React.ChangeEventHandler<HTMLSelectElement, HTMLSelectElement> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLSelectElement> \| undefined React.KeyboardEventHandler<HTMLSelectElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLSelectElement> \| undefined React.MouseEventHandler<HTMLSelectElement> \| undefined	`—`	Called when the element is activated.
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`multiple`	boolean \| undefined boolean \| undefined	`—`	Allows more than one value to be selected.
`required`	boolean \| undefined boolean \| undefined	`—`	Whether the user must provide a value before form submission.
`size`	"default" \| "sm" \| undefined "default" \| "sm" \| undefined	`"default"`	Visual size of the component.

NativeSelectOptGroup

NativeSelectOptGroup properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLOptGroupElement> \| undefined React.Ref<HTMLOptGroupElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLOptGroupElement> \| undefined React.FocusEventHandler<HTMLOptGroupElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLOptGroupElement> \| undefined React.FocusEventHandler<HTMLOptGroupElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLOptGroupElement, Element> \| undefined React.ChangeEventHandler<HTMLOptGroupElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLOptGroupElement> \| undefined React.KeyboardEventHandler<HTMLOptGroupElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLOptGroupElement> \| undefined React.MouseEventHandler<HTMLOptGroupElement> \| undefined	`—`	Called when the element is activated.

NativeSelectOption

NativeSelectOption properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLOptionElement> \| undefined React.Ref<HTMLOptionElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`disabled`	boolean \| undefined boolean \| undefined	`—`	Prevents user interaction.
`value`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	The current value when controlled by the application.
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLOptionElement> \| undefined React.FocusEventHandler<HTMLOptionElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLOptionElement> \| undefined React.FocusEventHandler<HTMLOptionElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLOptionElement, Element> \| undefined React.ChangeEventHandler<HTMLOptionElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLOptionElement> \| undefined React.KeyboardEventHandler<HTMLOptionElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLOptionElement> \| undefined React.MouseEventHandler<HTMLOptionElement> \| undefined	`—`	Called when the element is activated.

Usage notes

Provide a label and a meaningful option value. Prefer it when native platform behavior is more important than a custom popup.