Select

2.5.0

El componente Select permite a la persona usuaria seleccionar una opción dentro de una lista.

With groups

Without Groups

With placeholder option

Skeleton

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

const Example: React.FC = () => (
  <Select appearance="neutral" id="Id" name="Name">
    <Select.Group label="Group 1">
      <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.Group>
    <Select.Group label="Group 2">
      <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.Group>
  </Select>
);

export default Example;

Anatomía del componente

Se compone de un campo con una lista desplegable.

Guidelines

Usamos este componente cuando necesitamos que la persona usuaria ingrese información en un formulario, seleccionando una única opción dentro de una lista en formato desplegable.

Select nativo

Este componente depende del select nativo de cada navegador, por lo que el formato y diseño de la lista de opciones dependerá directamente del sistema operativo y navegador utilizado.

Contenido

Dado que el Select es un componente que interactúa directamente con el usuario de una aplicación o página, es importante que la información mostrada sea clara y correcta y ayude a guiar a la persona usuaria cuando estuviera completando un formulario.

En primer lugar, siempre debemos acompañar el Select con un componente Label, que informe claramente el dato que debe ser seleccionado. Esta label debe estar visible a todo momento, ya que ayuda a entender la información que está siendo solicitada.

Dentro de la lista de opciones, el texto de cada ítem debe ser breve para no sobrecargar de información. Más allá de esto, en caso de existir muchos ítems, tenemos la posibilidad de usar grupos para dividir las opciones en categorías.

Recomendaciones de uso

Seleccionar opciones en listas con más de 7 ítems
Seleccionar una configuración
Seleccionar una acción masiva

Componentes relacionados

Radio - Puede ser utilizado para seleccionar una única opción en una lista con menos de 7 ítems.
Toggle - Puede ser usado para seleccionar opciones binarias como activar y desactivar.
Checkbox - Puede ser utilizado para seleccionar múltiples opciones en una lista.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/select

Props

Additional props are passed to the <Select> element. See select docs for a list of props accepted by the <Select> element.

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	'danger' 'neutral' 'success' 'warning'	'neutral'	Change the visual style of the select.

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	Default	Description
width	string		Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.