Native Select — logic2b/ui

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

export default function NativeSelectDemo() {
  return (
    <NativeSelect
      aria-label="Favorite fruit"
      defaultValue="apple"
      className="w-[180px]"
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="blueberry">Blueberry</option>
      <option value="grapes">Grapes</option>
      <option value="pineapple">Pineapple</option>
    </NativeSelect>
  )
}

Installation

npx logic2b@next add native-select

Working with an AI assistant? Copy this prompt into Claude Code, Cursor or Copilot — it carries the install steps, a no-CLI fallback and a verification checklist.

Add the "native-select" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add native-select
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/native-select.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Install the dependencies:

npm install lucide-react class-variance-authority

Copy into ui/native-select.tsx:

import * as React from "react"
import { ChevronDownIcon } from "lucide-react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const nativeSelectVariants = cva(
  "border-input dark:bg-input/30 dark:hover:bg-input/50 has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-50 relative flex w-fit items-center rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
  {
    variants: {
      size: {
        sm: "h-8",
        default: "h-9",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
)

function NativeSelect({
  className,
  size,
  disabled,
  "aria-invalid": ariaInvalid,
  ...props
}: React.ComponentProps<"select"> & VariantProps<typeof nativeSelectVariants>) {
  return (
    <div
      data-slot="native-select"
      data-disabled={disabled ? "" : undefined}
      className={cn(
        nativeSelectVariants({ size }),
        "has-[select:focus-visible]:border-ring has-[select:focus-visible]:ring-ring/50 has-[select:focus-visible]:ring-[3px]",
        ariaInvalid &&
          "border-destructive ring-destructive/20 dark:ring-destructive/40",
        className
      )}
    >
      <select
        data-slot="native-select-control"
        disabled={disabled}
        aria-invalid={ariaInvalid}
        className="text-foreground w-full appearance-none bg-transparent py-1 pr-8 pl-3 text-sm outline-none disabled:cursor-not-allowed"
        {...props}
      />
      <ChevronDownIcon className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50" />
    </div>
  )
}

export { NativeSelect }

Usage

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

<NativeSelect
  aria-label="Favorite fruit"
  defaultValue="apple"
  className="w-[180px]"
>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</NativeSelect>

Native Select vs. Select

Use NativeSelect instead of Select when you want the browser’s own picker rather than a custom listbox:

Mobile — opens the OS-native wheel/sheet picker instead of a popover, which is what most users expect on touch devices.
Long option lists — native scrolling and type-ahead, no virtualization needed.
Forms without JS interactivity budget — it’s a real <select>, so it works with native form submission and <form> validation out of the box.

Reach for Select instead when you need custom option content (icons, descriptions, grouping headers) or a listbox that visually matches Radix’s popover styling exactly.

Examples

Disabled

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

export default function NativeSelectDisabledDemo() {
  return (
    <NativeSelect
      aria-label="Current plan"
      defaultValue="starter"
      className="h-8 w-[180px]"
      disabled
    >
      <option value="starter">Starter</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise (contact us)</option>
    </NativeSelect>
  )
}

Accessibility

Renders a real <select> element, so it inherits the browser’s built-in listbox semantics and keyboard support for free:

Opens with Enter/Space/↓, closes with Esc or a selection.
Type-ahead jumps to the first matching option.
Assistive technology announces the control as a native select — no ARIA wiring needed.
Pair with a <label htmlFor> (or wrap in a Field) for an accessible name.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX

<NativeSelect
  size="default"
  defaultValue="team"
  aria-label="Workspace plan"
>
  <option value="starter">Starter</option>
  <option value="team">Team</option>
  <option value="enterprise">Enterprise</option>
</NativeSelect>

API reference

Generated from the public TypeScript exports in src/ui/native-select.tsx.

View JSON

NativeSelect

Component

Props: React.ComponentProps<"select"> & VariantProps<typeof nativeSelectVariants>

Prop	Type	Required	Default	Description
`size`	`undefined`	No	—	—

Accessibility contract

Machine-readable behavior and consumer responsibilities for native-select.

View JSON

Support: Native semantics
Pattern: select; HTMLSelectElement

Keyboard interactions for native-select
Keys	Behavior
`ArrowUp` `ArrowDown` `ArrowLeft` `ArrowRight`	Move within the composite control.
`Alt+ArrowDown`	Open the platform option picker where supported.

Built-in semantics

Uses native select/listbox semantics and forwards invalid/disabled state.

Consumer responsibilities

Associate it with a label; do not rely on placeholder-like first options as the name.