Moodinary/UI

Select

Elegir 1 de 4 a 15 opciones conocidas. Más de 15, Combobox.

Select nativo del dashboard, de 34 px de alto, usado para el equipo de una acción y la zona horaria. Recibe option y optgroup; el navegador resuelve la lista y su interacción móvil.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/select.json
import
import { Select } from "@moodinary/ui/components/select";

Ejemplos

Selección y deshabilitado

Una lista corta de opciones conocidas no necesita búsqueda. Si la lista es larga, usá Combobox.

Código
default.tsx
import { Field, FieldLabel } from "@moodinary/ui/components/field";
import { Select } from "@moodinary/ui/components/select";

export default function SelectDefault() {
	return (
		<div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
			<Field>
				<FieldLabel htmlFor="action-team">Equipo</FieldLabel>
				<Select defaultValue="" id="action-team">
					<option value="">Toda la organización</option>
					<option value="class">4.º A</option>
					<option value="operations">Operaciones</option>
				</Select>
			</Field>
			<Field>
				<FieldLabel htmlFor="timezone">Zona horaria</FieldLabel>
				<Select disabled id="timezone">
					<option value="America/Argentina/Buenos_Aires">
						America/Argentina/Buenos_Aires
					</option>
				</Select>
			</Field>
		</div>
	);
}

Props

Select

PropTipoDefaultDescripción
value / defaultValuestring | number | readonly string[]-Opción elegida o selección inicial.
onChangeReact.ChangeEventHandler<HTMLSelectElement>-Recibe el nuevo valor en event.target.value.
childrenReact.ReactNode-Opciones nativas con value estable.
disabledbooleanfalseImpide abrir la lista y cambiar la selección.
requiredbooleanfalseExige una opción con valor no vacío al enviar.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"-Activa el borde y anillo de error.
namestring-Clave del valor en el envío nativo.

Cuándo sí y cuándo no

Hacé
  • Usá un label visible.
  • Ordená las opciones de manera predecible.
  • Mantené estable el value aunque cambie el texto.
Evitá
  • No uses Select para una lista larga que necesita búsqueda.
  • No cambies de pantalla apenas se elige una opción.
  • No uses el primer ítem como label del campo.

Accesibilidad

  • Tab enfoca el control; las flechas recorren las opciones con el comportamiento del navegador.
  • El sistema operativo resuelve la lista y su interacción en móvil.
  • Relacioná ayudas y errores mediante aria-describedby.