Native Select

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

NativeSelect

className

React.ComponentProps<"select">

NativeSelectOptGroup

className

React.ComponentProps<"optgroup">

NativeSelectOption

All props are forwarded to the underlying primitive.

React.ComponentProps<"option">

Code

// owner: Sona
"use client";

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

export default function NativeSelectExample() {
  return (
    <div className="space-y-3">
      <NativeSelect defaultValue="production">
        <NativeSelectOption value="development">Development</NativeSelectOption>
        <NativeSelectOption value="staging">Staging</NativeSelectOption>
        <NativeSelectOption value="production">Production</NativeSelectOption>
      </NativeSelect>
      <NativeSelect>
        <NativeSelectOptGroup label="Continents">
          <NativeSelectOption>Africa</NativeSelectOption>
          <NativeSelectOption>Europe</NativeSelectOption>
        </NativeSelectOptGroup>
      </NativeSelect>
    </div>
  );
}

Native Select

Component preview

On this page

Command Palette