Native Select

A styled native HTML select element for simple lists and mobile-friendly forms.

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectDemo() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-case-type`}>Case type</FieldLabel>
      <NativeSelect id={`${id}-case-type`} defaultValue="" className="w-full">
        <NativeSelectOption value="" disabled>
          Select case type
        </NativeSelectOption>
        <NativeSelectOption value="building-permit">Building permit</NativeSelectOption>
        <NativeSelectOption value="parking-permit">Parking permit</NativeSelectOption>
        <NativeSelectOption value="school-placement">School placement</NativeSelectOption>
        <NativeSelectOption value="home-help">Home help services</NativeSelectOption>
        <NativeSelectOption value="records-request">Public records request</NativeSelectOption>
      </NativeSelect>
      <FieldDescription>Decides which department receives the case.</FieldDescription>
    </Field>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/native-select.json

Installs to @/components/ui/native-select.

Manual installation

Install the dependencies:

pnpm add lucide-react@^1.48.0

Copy the source into your project:

components/ui/native-select.tsx

import { ChevronDownIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
	size?: 'sm' | 'default'
}

function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
	return (
		<div
			className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
			data-slot="native-select-wrapper"
			data-size={size}
		>
			<select
				data-slot="native-select"
				data-size={size}
				className="h-10 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
				{...props}
			/>
			<ChevronDownIcon
				className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
				aria-hidden="true"
				data-slot="native-select-icon"
			/>
		</div>
	)
}

function NativeSelectOption({ className, ...props }: React.ComponentProps<'option'>) {
	return (
		<option data-slot="native-select-option" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />
	)
}

function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<'optgroup'>) {
	return (
		<optgroup data-slot="native-select-optgroup" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />
	)
}

export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

A styled native HTML select element. Use it when you want the platform picker (for example on mobile devices), native form submission or maximum robustness, instead of the custom Select popover.

Features

Native select behaviour and form submission
Sizes: default and sm
Option groups
Disabled and invalid states
Consistent styling with other inputs

Usage

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

export function CaseTypeSelect() {
  return (
    <NativeSelect defaultValue="">
      <NativeSelectOption value="" disabled>
        Select case type
      </NativeSelectOption>
      <NativeSelectOption value="building-permit">Building permit</NativeSelectOption>
      <NativeSelectOption value="parking-permit">Parking permit</NativeSelectOption>
    </NativeSelect>
  )
}

Examples

Default

A case type picker with a label and a description.

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectDemo() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-case-type`}>Case type</FieldLabel>
      <NativeSelect id={`${id}-case-type`} defaultValue="" className="w-full">
        <NativeSelectOption value="" disabled>
          Select case type
        </NativeSelectOption>
        <NativeSelectOption value="building-permit">Building permit</NativeSelectOption>
        <NativeSelectOption value="parking-permit">Parking permit</NativeSelectOption>
        <NativeSelectOption value="school-placement">School placement</NativeSelectOption>
        <NativeSelectOption value="home-help">Home help services</NativeSelectOption>
        <NativeSelectOption value="records-request">Public records request</NativeSelectOption>
      </NativeSelect>
      <FieldDescription>Decides which department receives the case.</FieldDescription>
    </Field>
  )
}

With Groups

Departments organised in option groups.

import * as React from 'react'
import { Field, FieldLabel } from '@/components/ui/field'
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from '@/components/ui/native-select'

export function NativeSelectWithGroups() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-department`}>Responsible department</FieldLabel>
      <NativeSelect id={`${id}-department`} defaultValue="planning" className="w-full">
        <NativeSelectOptGroup label="Community services">
          <NativeSelectOption value="education">Education and preschool</NativeSelectOption>
          <NativeSelectOption value="social">Social services</NativeSelectOption>
          <NativeSelectOption value="elderly-care">Elderly care</NativeSelectOption>
          <NativeSelectOption value="culture">Culture and libraries</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Urban development">
          <NativeSelectOption value="planning">Planning and building</NativeSelectOption>
          <NativeSelectOption value="environment">Environment and health</NativeSelectOption>
          <NativeSelectOption value="waste">Water and waste</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Administration">
          <NativeSelectOption value="registry">Registry and archive</NativeSelectOption>
          <NativeSelectOption value="procurement">Procurement</NativeSelectOption>
        </NativeSelectOptGroup>
      </NativeSelect>
    </Field>
  )
}

Sizes

The default and sm sizes.

import * as React from 'react'
import { Field, FieldLabel } from '@/components/ui/field'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectSizes() {
  const id = React.useId()
  return (
    <div className="flex flex-col items-start gap-6">
      <Field className="w-56">
        <FieldLabel htmlFor={`${id}-default`}>Default</FieldLabel>
        <NativeSelect id={`${id}-default`} defaultValue="open" className="w-full">
          <NativeSelectOption value="open">Open cases</NativeSelectOption>
          <NativeSelectOption value="decided">Decided cases</NativeSelectOption>
          <NativeSelectOption value="archived">Archived cases</NativeSelectOption>
        </NativeSelect>
      </Field>
      <Field className="w-56">
        <FieldLabel htmlFor={`${id}-sm`}>Small</FieldLabel>
        <NativeSelect id={`${id}-sm`} size="sm" defaultValue="open" className="w-full">
          <NativeSelectOption value="open">Open cases</NativeSelectOption>
          <NativeSelectOption value="decided">Decided cases</NativeSelectOption>
          <NativeSelectOption value="archived">Archived cases</NativeSelectOption>
        </NativeSelect>
      </Field>
    </div>
  )
}

Small selects used as filters above a case list. Each select has a visually hidden label.

import { FilterIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectToolbar() {
  const id = React.useId()
  return (
    <div className="flex w-full max-w-2xl flex-wrap items-center gap-2 rounded-lg border bg-muted/50 p-2">
      <FilterIcon className="ml-1 size-4 text-muted-foreground" aria-hidden="true" />
      <label htmlFor={`${id}-status`} className="sr-only">
        Status
      </label>
      <NativeSelect id={`${id}-status`} size="sm" defaultValue="all">
        <NativeSelectOption value="all">All statuses</NativeSelectOption>
        <NativeSelectOption value="registered">Registered</NativeSelectOption>
        <NativeSelectOption value="in-progress">In progress</NativeSelectOption>
        <NativeSelectOption value="decided">Decided</NativeSelectOption>
      </NativeSelect>
      <label htmlFor={`${id}-officer`} className="sr-only">
        Case officer
      </label>
      <NativeSelect id={`${id}-officer`} size="sm" defaultValue="me">
        <NativeSelectOption value="me">Assigned to me</NativeSelectOption>
        <NativeSelectOption value="anna">Anna Lindqvist</NativeSelectOption>
        <NativeSelectOption value="mikko">Mikko Virtanen</NativeSelectOption>
        <NativeSelectOption value="omar">Omar Haddad</NativeSelectOption>
        <NativeSelectOption value="unassigned">Unassigned</NativeSelectOption>
      </NativeSelect>
      <label htmlFor={`${id}-period`} className="sr-only">
        Registered
      </label>
      <NativeSelect id={`${id}-period`} size="sm" defaultValue="30">
        <NativeSelectOption value="7">Last 7 days</NativeSelectOption>
        <NativeSelectOption value="30">Last 30 days</NativeSelectOption>
        <NativeSelectOption value="2026">Year 2026</NativeSelectOption>
      </NativeSelect>
      <Button variant="ghost" size="sm" className="ml-auto">
        Clear filters
      </Button>
    </div>
  )
}

In a Form

A school placement application with several selects in a card.

import * as React from 'react'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from '@/components/ui/native-select'

export function NativeSelectInForm() {
  const id = React.useId()
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Apply for school placement</CardTitle>
        <CardDescription>Autumn term 2026 · Applications close on 15 March.</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor={`${id}-grade`}>School year</FieldLabel>
            <NativeSelect id={`${id}-grade`} defaultValue="f" className="w-full">
              <NativeSelectOption value="f">Preschool class</NativeSelectOption>
              <NativeSelectOption value="1">Year 1</NativeSelectOption>
              <NativeSelectOption value="4">Year 4</NativeSelectOption>
              <NativeSelectOption value="7">Year 7</NativeSelectOption>
            </NativeSelect>
          </Field>
          <Field>
            <FieldLabel htmlFor={`${id}-school`}>First choice</FieldLabel>
            <NativeSelect id={`${id}-school`} defaultValue="" className="w-full">
              <NativeSelectOption value="" disabled>
                Select a school
              </NativeSelectOption>
              <NativeSelectOptGroup label="Central district">
                <NativeSelectOption value="ekbacken">Ekbacken School</NativeSelectOption>
                <NativeSelectOption value="kungsgatan">Kungsgatan School</NativeSelectOption>
              </NativeSelectOptGroup>
              <NativeSelectOptGroup label="Northern district">
                <NativeSelectOption value="lindholmen">Lindholmen School</NativeSelectOption>
                <NativeSelectOption value="solberga">Solberga School</NativeSelectOption>
              </NativeSelectOptGroup>
            </NativeSelect>
            <FieldDescription>You can add up to three choices on the next step.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor={`${id}-language`}>Mother tongue tuition</FieldLabel>
            <NativeSelect id={`${id}-language`} defaultValue="none" className="w-full">
              <NativeSelectOption value="none">Not needed</NativeSelectOption>
              <NativeSelectOption value="ar">Arabic</NativeSelectOption>
              <NativeSelectOption value="fi">Finnish</NativeSelectOption>
              <NativeSelectOption value="so">Somali</NativeSelectOption>
              <NativeSelectOption value="uk">Ukrainian</NativeSelectOption>
            </NativeSelect>
          </Field>
        </FieldGroup>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">Save draft</Button>
        <Button>Continue</Button>
      </CardFooter>
    </Card>
  )
}

Disabled

A locked case status.

import * as React from 'react'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectDisabled() {
  const id = React.useId()
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-status`}>Case status</FieldLabel>
      <NativeSelect id={`${id}-status`} disabled defaultValue="decided" className="w-full">
        <NativeSelectOption value="registered">Registered</NativeSelectOption>
        <NativeSelectOption value="decided">Decided</NativeSelectOption>
      </NativeSelect>
      <FieldDescription>Case 2026-04812 was decided on 12 May 2026 and is locked.</FieldDescription>
    </Field>
  )
}

Invalid

A required parking zone with an error message.

import * as React from 'react'
import { Field, FieldError, FieldLabel } from '@/components/ui/field'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function NativeSelectInvalid() {
  const id = React.useId()
  return (
    <Field data-invalid="true" className="w-full max-w-xs">
      <FieldLabel htmlFor={`${id}-zone`}>Parking zone</FieldLabel>
      <NativeSelect
        id={`${id}-zone`}
        aria-invalid="true"
        aria-describedby={`${id}-zone-error`}
        defaultValue=""
        className="w-full"
      >
        <NativeSelectOption value="" disabled>
          Select parking zone
        </NativeSelectOption>
        <NativeSelectOption value="a">Zone A – City centre</NativeSelectOption>
        <NativeSelectOption value="b">Zone B – Inner districts</NativeSelectOption>
        <NativeSelectOption value="c">Zone C – Outer districts</NativeSelectOption>
      </NativeSelect>
      <FieldError id={`${id}-zone-error`}>Select the zone where you are registered as a resident.</FieldError>
    </Field>
  )
}

Accessibility

Uses the native select element with full platform accessibility
Associate a label with htmlFor and id; use a visually hidden label when the context makes it obvious
Set aria-invalid for invalid values and describe the error in text
The chevron icon is aria-hidden