Select

2.7.0

O componente Select permite ao usuário selecionar uma opção dentro de uma 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;

Anatomia do componente

O componente é composto por um campo com uma lista dropdown.

Guidelines

Utilizamos esse componente quando precisamos que o usuário insira informações em um formulário, selecionando uma única opção dentro de uma lista em formato dropdown.

Select nativo

Este componente é dependente do select nativo de cada navegador, portanto o visual da lista de opções dependerá diretamente do sistema operacional e do navegador usado.

Conteúdo

Dado que o Select é um componente que interage diretamente com o usuário de um aplicativo ou página, é importante que a informação mostrada seja clara e correta e ajude a guiá-lo quando estiver preenchendo um formulário.

Em primeiro lugar, sempre devemos acompanhar o Select com um componente Label, que informe adequadamente o dado que deve ser inserido. Esta label deve estar visível a todo momento, já que ajuda o usuário a entender a informação que está sendo solicitada.

Dentro da lista de opções, o texto de cada item deve ser breve para não sobrecarregar de informação. Além disso, caso haja muitos itens temos a possibilidade de utilizar grupos para dividir as opções em categorias.

Recomendação de uso

Selecionar opções em listas com mais de 7 itens
Selecionar uma configuração
Selecionar uma ação massiva

Componentes relacionados

Radio - Pode ser usado para selecionar uma única opção em uma lista com menos de 7 itens.
Toggle - Pode ser usado para selecionar opções binárias como liga e desliga.
Checkbox - Pode ser usado para selecionar múltiplas opções em uma lista.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/select

Props

Propriedades adicionais são repassadas ao elemento <Select>. Consulte a documentação do elemento select para ver a lista de atributos aceitos pelo elemento <Select>.

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.