Select

Selector desplegable accesible con búsqueda, teclado y ARIA completo.

---

Import

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from '@imansi/ui';

---

Uso básico

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Elegí una opción" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Opción 1</SelectItem>
    <SelectItem value="2">Opción 2</SelectItem>
    <SelectItem value="3">Opción 3</SelectItem>
  </SelectContent>
</Select>

---

Con label

<div className="space-y-2">
  <Label>País</Label>
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Seleccioná tu país" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="ar">Argentina</SelectItem>
      <SelectItem value="br">Brasil</SelectItem>
      <SelectItem value="cl">Chile</SelectItem>
      <SelectItem value="uy">Uruguay</SelectItem>
    </SelectContent>
  </Select>
</div>

---

Con grupos

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Elegí una ciudad" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Argentina</SelectLabel>
      <SelectItem value="ba">Buenos Aires</SelectItem>
      <SelectItem value="cor">Córdoba</SelectItem>
      <SelectItem value="ros">Rosario</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Uruguay</SelectLabel>
      <SelectItem value="mvd">Montevideo</SelectItem>
      <SelectItem value="pde">Punta del Este</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

---

Controlado

import { useState } from 'react';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@imansi/ui';

export function SelectorRol() {
  const [rol, setRol] = useState('user');

  return (
    <Select value={rol} onValueChange={setRol}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="admin">Administrador</SelectItem>
        <SelectItem value="user">Usuario</SelectItem>
        <SelectItem value="guest">Invitado</SelectItem>
      </SelectContent>
    </Select>
  );
}

---

Deshabilitado

<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="No disponible" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Opción 1</SelectItem>
  </SelectContent>
</Select>

---

Props

Select

Prop	Tipo	Default	Descripción
value	string	—	Valor seleccionado (controlado)
defaultValue	string	—	Valor inicial
onValueChange	(value: string) => void	—	Callback al cambiar
disabled	boolean	false	Deshabilita el select
open	boolean	—	Estado del dropdown (controlado)
onOpenChange	(open: boolean) => void	—	Callback al abrir/cerrar

SelectTrigger

Prop	Tipo	Default	Descripción
size	'sm' | 'md' | 'lg'	'md'	Tamaño del trigger
className	string	—	Clases adicionales

SelectItem

Prop	Tipo	Default	Descripción
value	string	—	Valor del item (obligatorio)
disabled	boolean	false	Deshabilita este item
className	string	—	Clases adicionales

---

Accesibilidad

• Navegable con Tab
• Enter / Space para abrir
• Flechas ↑↓ para moverse entre items
• Escape para cerrar
• Escribir para búsqueda rápida
• role="combobox" + role="listbox" + role="option" aplicados automáticamente