Select

2.7.1

Permite elegir una opción dentro de una lista predefinida, mostrada en un campo desplegable nativo.

Ver en Figma

Cuándo usar

Elegir una configuración entre varias opciones predefinidas: definir un único valor dentro de un conjunto cerrado de alternativas. Ej.: "Moneda de la tienda", "País principal", "Idioma de la tienda".
Ordenar o filtrar un listado: aplicar un criterio sobre una lista de datos sin ocupar espacio permanente en la pantalla. Ej.: "Ordenar por", "Método de envío".
Reducir el espacio de una lista larga de opciones: cuando existen 4 o más alternativas y mostrarlas todas a la vez (como en un Radio) recargaría la pantalla. Ej.: lista de provincias, lista de métodos de pago.
Agrupar opciones por categoría: dividir una lista extensa en grupos con Select.Group, para que sea más fácil ubicar una opción puntual. Ej.: métodos de envío agrupados por transportista.

Cuándo no usar

Elegir una opción entre pocas alternativas visibles: con menos de 4 opciones, mostrarlas todas mejora la comparación directa y evita un clic adicional para abrir la lista. En su lugar, usar Radio.
Seleccionar más de un valor a la vez: el Select nativo solo admite una opción marcada. En su lugar, usar Checkbox o MultiSelect.
Aplicar un cambio inmediato de tipo on/off: activar o desactivar una configuración binaria con efecto inmediato. En su lugar, usar Toggle.
Mostrar un valor sin alternativas reales para elegir: si solo existe una opción posible (por ejemplo, un único país habilitado), un Select deshabilitado no aporta ninguna decisión. En su lugar, mostrar el valor como texto simple.

Anatomía

Opciones por defecto

Opciones agrupadas con Select.Group

Field: contenedor interactivo que recibe el foco y la interacción de teclado.
Selected option: texto de la opción elegida; cuando no hay selección, muestra la opción de placeholder.
Icon: ícono ChevronDownIcon que indica que el campo despliega una lista de opciones.

Al abrir el campo se despliega la lista de opciones (componente Select.Option), que puede dividirse en categorías con Select.Group (opcional) cuando hay muchos ítems. Esa lista es el dropdown nativo del navegador: su apariencia depende del SO/navegador y Nimbus no la estiliza.

Variantes

Apariencia

Neutral: apariencia por defecto, para un campo de formulario sin ninguna validación puntual. Ej.: "Categoría del producto".

Danger: señala un error de validación en la selección. Ej.: un campo obligatorio que quedó sin completar al enviar el formulario.

Warning: advierte una condición que conviene revisar, sin bloquear el envío del formulario. Ej.: una opción que puede afectar otra configuración ya definida.

Success: confirma que el valor elegido es válido. Ej.: una configuración obligatoria que ya quedó completa.

Ai-generative: aplica un borde con degradé de IA de forma permanente, para un campo que forma parte de una experiencia o flujo de inteligencia artificial. Ej.: un Select dentro de un asistente de IA o de una función generada con Lumi.

Generado por IA

aiGenerated: aplica un anillo de foco con degradé de IA sobre el campo para señalar que el valor mostrado fue sugerido por inteligencia artificial; tiene prioridad visual sobre appearance. Ej.: una opción precompletada por una sugerencia automática que la persona usuaria puede revisar o cambiar.

Estados

Aplicación

Suele aparecer en formularios de configuración, filtros de listados y modales, acompañado siempre de un Label (directo o a través de FormField.Select) que identifica el dato solicitado.

Moneda

Do and Don'ts

Ordenar por

Redactar cada opción de forma breve y específica, para identificar su significado de un vistazo.

Ordenar por

Evitar opciones genéricas o ambiguas que obliguen a adivinar qué representan.

Redactar el texto de cada opción breve y claro.

No sobrecargar las opciones con textos largos que no se alcanzan a leer.

País

Argentina

Mostrar el valor como texto simple cuando existe una sola alternativa posible.

País

No usar un Select deshabilitado para mostrar un único valor sin alternativas reales.

Accesibilidad

Etiqueta asociada: acompañar siempre el campo con un Label (directo o mediante FormField.Select) vinculado por id, para que los lectores de pantalla anuncien qué dato se solicita.
Navegación por teclado: al ser un <select> nativo, es alcanzable con Tab y se abre y recorre con las flechas del teclado, sin necesitar soporte adicional.
Foco visible: el campo muestra un anillo de foco (:focus-visible) al navegarlo con teclado.
No depender solo del color: las apariencias danger, warning y success deben acompañarse de un texto de ayuda o error (por ejemplo, con FormField.Select y su helpText), ya que el color del borde por sí solo no comunica el estado a personas con baja visión.
Estado deshabilitado: el atributo disabled bloquea la interacción y los lectores de pantalla lo anuncian como no disponible.

Guía de contenido

El placeholder orienta a elegir sin adelantar una respuesta correcta. Cada opción nombra la elección con un sustantivo o frase nominal, nunca con un verbo.

Capitalización: sentence case para las opciones y para el label de Select.Group.

Puntuación: sin punto final en el placeholder option ni en las opciones.

Longitud de las opciones: sin wrapping a varias líneas — si una opción no entra en una línea, reescribirla.

Forma verbal de las opciones: sustantivo o frase nominal, por ejemplo "Argentina" o "Tarjeta de crédito"; nunca un verbo como "Seleccionar Argentina".

Orden de las opciones: alfabético cuando no hay otro criterio lógico; por frecuencia de uso cuando existe una distribución clara, por ejemplo los medios de pago más usados primero.

Opción por defecto: preseleccionar la opción lógica para la mayoría de las personas usuarias cuando exista; si no la hay, usar el placeholder option — nunca dejar el campo vacío sin texto.

Partes

Parte	Regla de contenido	Ejemplo
Placeholder option	"Seleccioná + [objeto]"	"Seleccioná un país"
Opción	Sustantivo o frase nominal. Sentence case. Sin punto final. Sin wrapping.	"Argentina"
Select.Group label	Sustantivo breve. Sentence case.	"América del Sur"

Casos críticos

Caso	Qué hacer
Select sin opción preseleccionada	Agregar siempre un placeholder option — nunca dejar el campo vacío sin guía.
Opciones muy largas que wrappean	Reescribir las opciones; si no es posible, revisar si Select es el componente correcto.
Más de ~10 opciones sin grupos	Considerar Select.Group para organizar; si la lista es muy larga y necesita búsqueda, usar otro componente.
Opciones en title case	Convertir a sentence case; solo los nombres propios llevan mayúscula.

Implementación

Instalá el componente vía terminal.

npm install @nimbus-ds/components

import React from "react";
import { Select } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Select appearance="neutral" id="Id" name="Name">
    <Select.Option label="This option is selected" selected value="Option 1" />
    <Select.Option disabled label="This option is disabled" value="Option 2" />
    <Select.Option label="Option 3" value="Option 3" />
    <Select.Option label="Option 4" value="Option 4" />
    <Select.Option label="Option 5" value="Option 5" />
    <Select.Option label="Option 6" value="Option 6" />
  </Select>
);

export default Example;

Props

Las propiedades adicionales se pasan al elemento <select>. Consultá la documentación del elemento select para ver la lista de atributos aceptados.

Componentes relacionados

Radio — Para elegir una única opción entre pocas alternativas visibles.
Checkbox — Para seleccionar una o varias opciones de forma independiente entre sí.
Toggle — Para activar o desactivar una configuración con efecto inmediato.
Input — Para ingresar texto libre en lugar de elegir entre opciones predefinidas.
Label — Para identificar el dato que el campo solicita.

Select

Name	Type	Default	Description
name*	string		The name of the wrapper element or the select element when native.
id*	string		The id of the wrapper element or the select element when native.
children*	React.ReactNode		The content of the select.
appearance	'ai-generative' 'danger' 'neutral' 'success' 'warning'	'neutral'	Change the visual style of the select.
aiGenerated	boolean	'false'	Shows ai-generative appearance with active ai focus shadow. When true, this styling takes precedence over `appearance`.

Select.Group

Name	Type	Default	Description
label*	string		Label for the option group.
children*	React.ReactNode		The content of the option group.

Select.Option

Name	Type	Default	Description
label*	string		Label for the option.
value*	string		Value of the option

Select.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
className	string
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ayudanos a mejorar la documentación

¿Encontraste un problema o tenés una sugerencia? Contanos.

Compartí tu opinión