Select

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

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