Native Select

Forms

About

A styled native select with grouped options, placeholders, inline variants and error states. Uses the browser picker for the best mobile experience in forms.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Native Select to your project and fits it to your theme.

Code

How Native Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { NativeSelect, type NativeSelectOption } from "@/components/ui/native-select";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;

const COUNTRIES: NativeSelectOption[] = [
  { value: "us", label: "United States" },
  { value: "ca", label: "Canada" },
  { value: "gb", label: "United Kingdom" },
  { value: "de", label: "Germany" },
  { value: "fr", label: "France" },
  { value: "jp", label: "Japan" },
];

function PreviewPanel({
  children,
  className,
  title,
  subtitle,
}: {
  children: React.ReactNode;
  className?: string;
  title?: string;
  subtitle?: string;
}) {
  return (
    <div
      className={cn(
        wensityCardSurfaceClass,
        "w-full max-w-md p-5 sm:p-6",
        className,
      )}
    >
      {title ? (
        <div className="mb-5 border-b border-[var(--border)] pb-4">
          <p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
            {title}
          </p>
          {subtitle ? (
            <p className="mt-1 text-[12px] leading-[1.5] text-[var(--muted-foreground)]">
              {subtitle}
            </p>
          ) : null}
        </div>
      ) : null}
      {children}
    </div>
  );
}

export function NativeSelectPreview() {
  return (
    <PreviewPanel title="Region" subtitle="A browser-native select for forms.">
      <NativeSelect
        label="Country"
        placeholder="Select your country"
        options={COUNTRIES}
      />
    </PreviewPanel>
  );
}

// ── Variant examples ──

export default function Demo() {
  return <NativeSelectPreview />;
}