RadCN
Inputsreadycomponentready

Native Select

A token-driven wrapper around browser-native select, option, and optgroup elements.

Importimport { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from 'radcn/native-select'
Preview

Live package example

Render the four upstream Native Select examples with real select, option, and optgroup markup.

Example Parity

Render the four upstream Native Select examples with real select, option, and optgroup markup.

Preview

Choose a role.

import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from 'radcn/native-select'

export function NativeSelectExamples() {
  return (
    <>
      <NativeSelect name="status">
        <NativeSelectOption value="">Select status</NativeSelectOption>
        <NativeSelectOption value="todo">Todo</NativeSelectOption>
        <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
        <NativeSelectOption value="done">Done</NativeSelectOption>
        <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
      </NativeSelect>

      <NativeSelect disabled name="priority">
        <NativeSelectOption value="">Select priority</NativeSelectOption>
        <NativeSelectOption value="low">Low</NativeSelectOption>
        <NativeSelectOption value="medium">Medium</NativeSelectOption>
        <NativeSelectOption value="high">High</NativeSelectOption>
        <NativeSelectOption value="critical">Critical</NativeSelectOption>
      </NativeSelect>

      <NativeSelect name="department">
        <NativeSelectOption value="">Select department</NativeSelectOption>
        <NativeSelectOptGroup label="Engineering">
          <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
          <NativeSelectOption value="backend">Backend</NativeSelectOption>
          <NativeSelectOption value="devops">DevOps</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Sales">
          <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
          <NativeSelectOption value="account-manager">Account Manager</NativeSelectOption>
          <NativeSelectOption value="sales-director">Sales Director</NativeSelectOption>
        </NativeSelectOptGroup>
        <NativeSelectOptGroup label="Operations">
          <NativeSelectOption value="support">Customer Support</NativeSelectOption>
          <NativeSelectOption value="product-manager">Product Manager</NativeSelectOption>
          <NativeSelectOption value="ops-manager">Operations Manager</NativeSelectOption>
        </NativeSelectOptGroup>
      </NativeSelect>

      <NativeSelect ariaInvalid name="role">
        <NativeSelectOption value="">Select role</NativeSelectOption>
        <NativeSelectOption value="admin">Admin</NativeSelectOption>
        <NativeSelectOption value="editor">Editor</NativeSelectOption>
        <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
        <NativeSelectOption value="guest">Guest</NativeSelectOption>
      </NativeSelect>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from 'radcn/native-select'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • NativeSelect renders a real select element, so keyboard, pointer, value, form, reset, and constraint-validation behavior stay browser-owned.
  • NativeSelectOption renders option and NativeSelectOptGroup renders optgroup for native option grouping semantics.
  • Disabled and invalid states map to the select disabled attribute and aria-invalid attribute.
  • Labels and error text stay composed with RadCN Label, Field, and FieldError rather than becoming Native Select-owned state.

Customization

  • NativeSelect exposes data-radcn-native-select-wrapper, data-radcn-native-select, data-radcn-native-select-icon, data-radcn-native-select-option, and data-radcn-native-select-optgroup hooks.
  • Use class and style on the wrapper plus CSS variables such as --radcn-native-select-border, --radcn-native-select-bg, --radcn-native-select-fg, and --radcn-native-select-invalid.
  • The size prop supports default and sm sizes while native option popup chrome remains browser-owned.
  • Option and optgroup Canvas colors map to package CSS using Canvas and CanvasText.

Remix 3 Notes

  • React props and state examples map to explicit RadCN props and browser-native select state.
  • className maps to class, data-slot maps to data-radcn-native-select-* hooks, aria-invalid maps to ariaInvalid, and disabled maps to disabled.
  • ChevronDownIcon and lucide-react are app-owned presentation; RadCN keeps a dependency-free decorative icon span.
  • Tailwind utilities map to RadCN classes, CSS variables, and app-authored CSS.
  • Browser-native option popup rendering is intentionally not forced into DOM parity.
  • vendor source remains read-only evidence and is not imported by RadCN.