Native Select

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/native-select.json

Usage

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

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelect>

Examples

With groups

Organize options using NativeSelectOptGroup for better categorization.

Disabled state

Disable individual options or the entire select component.

Invalid state

Show validation errors with the aria-invalid attribute and error styling.

API reference

NativeSelect

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`disabled`	`boolean`	`false`	Whether the select is disabled
`value`	`string`	-	Controlled value
`onChange`	`function`	-	Change event handler

All standard HTML select attributes are supported.

NativeSelectOption

Prop	Type	Default	Description
`value`	`string`	-	Value of the option
`disabled`	`boolean`	`false`	Whether option is disabled

All standard HTML option attributes are supported.

NativeSelectOptGroup

Prop	Type	Default	Description
`label`	`string`	-	Label for the option group
`className`	`string`	-	Additional CSS classes

All standard HTML optgroup attributes are supported.

Native Select

On this page