# Dropdown Un dropdown permite elegir una opción de una lista cerrada de valores. Mantiene el formulario compacto y oculta opciones hasta que se necesitan. ```tsx import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "@/components/ui/select"; Borrador En revisión Aprobado Archivado ``` ## Uso ### Cuándo usar dropdown - Las opciones son un conjunto cerrado y conocido. - El espacio en pantalla obliga a ocultar la lista hasta que se necesita. - La persona reconoce el valor cuando lo ve, no necesita escribirlo. ### Dropdown vs combobox vs radio - Si las opciones son pocas y caben visibles: radio group. - Si la lista es larga y escribir acelera la selección: combobox. - Si la lista es media o larga y la selección es ocasional: dropdown. - Si la selección puede ser múltiple: usa combobox con multi-select, no este componente. ## Variantes ### Clearable Activa `clearable` en filtros y campos opcionales donde la persona pueda querer descartar la selección sin abrir la lista. Requiere controlar el `value` para poder limpiarlo desde fuera. ```tsx // Controla `value` y agrega un botón clear en el trigger. const [value, setValue] = useState(); setValue(undefined)} > … ``` ## Estados ### Deshabilitado Usa `disabled` cuando la opción no está disponible en el contexto actual pero podría volver a estarlo. Si nunca aplica, no lo muestres. ```tsx ``` ### Error - Comunica el error con un mensaje claro debajo del control. - Conecta el mensaje al dropdown con aria-describedby. - Mantén la última selección válida visible cuando sea posible. ## Accesibilidad ### Label y teclado - Todo dropdown debe tener un label visible o aria-label. - Flecha abajo abre la lista y navega entre opciones. - Enter selecciona y cierra; Esc cierra sin cambios. - Empezar a escribir hace autocompletado de búsqueda dentro de la lista (Radix lo provee por defecto). ## Contenido ### Etiquetas y opciones - El label nombra el dato que se elige, no la acción de elegir. - El placeholder anticipa el tipo de valor esperado, no lo reemplaza. - Ordena las opciones por relevancia o alfabéticamente, no por orden de creación. - Mantén nombres cortos: si una opción necesita explicación, agrega una descripción aparte en lugar de alargar el label.