Selector nativo — 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>
  )
}

Instalación

npx logic2b@next add native-select

¿Trabajas con un asistente de IA? Copia este prompt en Claude Code, Cursor o Copilot: incluye los pasos de instalación, una alternativa sin CLI y una lista de verificación.

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.

Instala las dependencias:

npm install lucide-react class-variance-authority

Copia el contenido en 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 }

Uso

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

<NativeSelect
  aria-label="Fruta favorita"
  defaultValue="manzana"
  className="w-[180px]"
>
  <option value="manzana">Manzana</option>
  <option value="platano">Plátano</option>
</NativeSelect>

Selector nativo o Selector

Usa NativeSelect en vez de Select cuando prefieras el selector del navegador a una lista personalizada:

Móviles: abre la rueda o panel nativo del sistema operativo, que es el comportamiento habitual en dispositivos táctiles.
Listas de opciones extensas: aporta desplazamiento y búsqueda incremental nativos sin necesidad de virtualización.
Formularios sin presupuesto para interactividad JavaScript: es un <select> real, por lo que funciona directamente con el envío y la validación nativos del formulario.

Elige Select cuando necesites contenido personalizado en las opciones, como iconos, descripciones o encabezados de grupo, o una lista cuyo aspecto coincida exactamente con el de los paneles emergentes.

Ejemplos

Desactivado

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>
  )
}

Accesibilidad

Genera un elemento <select> real, por lo que hereda la semántica de lista y el soporte de teclado del navegador:

Se abre con Intro, Espacio o ↓, y se cierra con Esc o al elegir una opción.
La búsqueda incremental salta a la primera opción coincidente.
Las tecnologías de asistencia anuncian el control como selector nativo sin configuración ARIA adicional.
Asócialo a un <label htmlFor> o envuélvelo en un Field para darle un nombre accesible.

Playground interactivo

Edita las propiedades del componente y revisa el JSX exacto antes de copiarlo. La vista previa se carga solo cuando esta sección entra en pantalla.

JSX generado

<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>

Referencia de API

Generada a partir de las exportaciones públicas de TypeScript en src/ui/native-select.tsx. Las descripciones técnicas conservan el texto canónico del código fuente.

Ver JSON

NativeSelect

Componente

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

Propiedad	Tipo	Obligatoria	Valor predeterminado	Descripción
`size`	`undefined`	No	—	—

Contrato de accesibilidad

Comportamiento legible por máquinas y responsabilidades de quien integra native-select. Los detalles normativos conservan el texto canónico del registro.

Ver JSON

Soporte: Semántica nativa
Patrón: select; HTMLSelectElement

Interacciones de teclado para native-select
Teclas	Comportamiento
`ArrowUp` `ArrowDown` `ArrowLeft` `ArrowRight`	Move within the composite control.
`Alt+ArrowDown`	Open the platform option picker where supported.

Semántica incorporada

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

Responsabilidades de integración

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