Native Select — logic2b/ui

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

export default function NativeSelectDemo() {
  return (
    <NativeSelect 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@latest 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@latest init
   ```

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

   ```bash
   npx logic2b@latest 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 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 size="sm" defaultValue="starter" className="w-[180px]" disabled>
      <option value="starter">Starter</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise (contact us)</option>
    </NativeSelect>
  )
}

API

Prop	Type	Default
`size`	`sm \| default`	`default`
`disabled`	`boolean`	`false`
`aria-invalid`	`boolean`	—
…props	`React.ComponentProps<"select">`	—

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.