NativeSelect

Form

A themed native select with option groups and browser behavior.

Controlled selectionOption groupsDisabled option and control

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

native-select.tsx

"use client";

import { NativeSelect } from "@/components/ui/native-select";
import { Label } from "@dashboardpack/core/components/ui/label";
import { useState } from "react";

export default function NativeSelectExample() {
  const [role, setRole] = useState("editor");
  return (
    <div className="w-full max-w-xs space-y-5">
      <div className="space-y-2">
        <Label htmlFor="native-role">Team role</Label>
        <NativeSelect
          id="native-role"
          value={role}
          onChange={(event) => setRole(event.target.value)}
        >
          <optgroup label="Team members">
            <option value="viewer">Viewer</option>
            <option value="editor">Editor</option>
          </optgroup>
          <optgroup label="Administration">
            <option value="admin">Administrator</option>
            <option value="owner" disabled>
              Owner (restricted)
            </option>
          </optgroup>
        </NativeSelect>
      </div>
      <NativeSelect disabled aria-label="Managed region">
        <option>Managed by your organization</option>
      </NativeSelect>
      <p role="status" className="text-xs text-muted-foreground">
        Selected role: {role}
      </p>
    </div>
  );
}

Usage

Render native option and optgroup children. Use value/onChange or defaultValue. NativeSelect is a single-line dropdown; use the existing Select or Combobox for custom popup behavior or search.

Import

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

Shipped as editable source in src/components/ui/native-select.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/native-select.tsx

import type { ComponentProps } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@dashboardpack/core/lib/utils";
export function NativeSelect({
  className,
  ...props
}: ComponentProps<"select">) {
  return (
    <span className="relative block w-full">
      <select
        className={cn(
          "h-9 w-full appearance-none rounded-md border border-input bg-background py-1 pe-9 ps-3 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        {...props}
      />
      <ChevronDown
        aria-hidden
        className="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
      />
    </span>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

NativeSelect props
Prop	Type / Default	Description
value / defaultValue	`string` Default: —	Controlled or initial native value.
onChange	`ChangeEventHandler<HTMLSelectElement>` Default: —	Handle native selection.
disabled / required / name	`native select attributes` Default: —	Native form behavior.
children	`ReactNode` Default: —	Options and optgroups.

Build with these too

Select Field