Skip to content

Native Select

Use the browser’s built-in picker with Youj field styling.

import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a native select when the operating system's picker serves people better than a custom popup: long option lists on phones, where the OS wheel or sheet is faster; forms that must work before JavaScript loads; plain server-rendered forms. When you need custom rows, icons, search or motion in the popup, use Select or a Combobox.

import { NativeSelect, NativeSelectOption } from '@youj/react'

export function Priority() {
  return (
    <NativeSelect name="priority" aria-label="Priority" defaultValue="high">
      <NativeSelectOption value="urgent">Urgent</NativeSelectOption>
      <NativeSelectOption value="high">High</NativeSelectOption>
      <NativeSelectOption value="low">Low</NativeSelectOption>
    </NativeSelect>
  )
}

NativeSelect takes every <select> prop: value and onChange, name, required, disabled, aria-invalid. className sizes the wrapper, so className="w-full" makes it fill its column. Group options with NativeSelectOptGroup. Put it in a Field for a label, a description and an error. The API matches shadcn/ui's Native Select.

Reference

Propssize (1)

Props

NativeSelect props
PropType
size'sm' | 'default' | 'lg'

The control height.

default 'default'

'default'
Reduced motionThe picker is the operating system's, so there's no motion to reduce

Reduced motion

The picker is the operating system's, so there's no motion to reduce. The field's colors ease on hover and focus in both modes.

AccessibilityARIA, announcements

Accessibility

  • It's a real <select>, so keyboards, screen readers, autofill and form submission all work the platform's way, before and after hydration.
  • Name it with a FieldLabel or aria-label. The chevron is decorative (aria-hidden).
  • Option colors follow the popover tokens where the browser lets a page style them; elsewhere the picker is the system's own and follows the page's color scheme.