Select
Base
O componente Select permite selecionar um ou mais itens de uma lista de opções.
Placeholder
Utilize a propriedade placeholder para exibir um texto de apoio quando nenhuma opção estiver selecionada.
Opções
Utilize o subcomponente Select.Option para definir uma ou mais opções.
Conteúdo da opção
Além de um texto simples, é possível inserir outros componentes como filhos do Select.Option para criar opções visualmente mais complexas.
A label associada a uma opção é, por padrão, definida como o texto interno (textContent) do Select.Option correspondente. Por isso, quando for preciso criar opções mais elaboradas utilize o subcomponente Select.Option.Label para definir explicitamente o label.
O subcomponente Select.Option.Label sempre irá ocupar todo espaço disponível horizontalmente.
Opção desabilitada
Utilize a propriedade disabled do subcomponente Select.Option para desabilitar uma opçãoo.
Grupo de opções
Envolva as opções no subcomponente Select.Group para agrupá-las.
Grupo colapsável
Utilize a propriedade collapsible do subcompoente Select.Option para que, assim como o Accordion, seu conteúdo possa ser contraído ou expandido.
Utilize a propriedade defaultClose para que um grupo colapsável inicie contraído.
Separador
Utilize o subcomponente Select.Divider para separar opções.
Seleção múltipla
Utilize a propriedade multiple para indicar que se trata de um componente Select com múltipla seleção.
Valor inicial e controle de estado
Utilize a propriedade defaultvalue para prover um valor inicial ao componente Select não controlado, ou utilize a propriedade value para gerenciar o valor do Select controlado.
Os valores atribuídos ao defaultValue ou ao value do Select devem ser correspondentes àqueles existentes na propriedade value do subcomponente Select.Option. Caso a intenção seja de que nenhuma das opções disponíveis esteja selecionada, é necessário fornecer uma string vazio em caso de seleção única ou array vazios em caso de seleção múltipla.
Não controlado
Utilize a propriedade defaultValue para definir o valor inicial do Select.
Controlado
Você deve criar um estado para gerenciar o valor através da propriedade value ao utilizar o Select controlado.
Desabilitado
Utilize a propriedade disabled para impedir a edição ou qualquer outra interação do usuário com o componente Select, tornando-o desabilitado.
Como um campo de formulário
Utilize o componente Select dentro de um Form.Control quando se tratar de um campo de formulário.
Com erro
Utilize a propriedade error para sinalizar que o Select foi preenchido com um valor inválido. Isso aplicará automaticamente um estilo visual que indicará o erro ao usuário.
Com sucesso
Use a propriedade success para indicar que o Select foi preenchido com um valor válido em um cenário onde haja validação. Isso aplicará um feedback visual positivo ao campo de seleção.
Integração com o Form.Control
Assim como em outros componentes de formulário, o componente Select está integrado com o subcomponente Form.Control e recebe as propriedades error e success automaticamente por meio dessa integração.
Controlando a abertura e o fechamento do Dropdown
Use a propriedade open para controlar a abertura e o fechamento do Dropdown do Select.
Customizações
A seguir as principais opções de customização disponíveis para o componente Select.
Ícone
Utilize a propriedade startIcon para adicionar um ícone no início do input.
Valores selecionados
Utilize a propriedade renderInputValue para modificar a forma com os valores selecionados são exibidos no input.
Ao usá-lo, você terá que lidar com a regra de exibir o placeholder quando não houver valor. O estilo ficará limpo, então se você quiser manter o estilo padrão, terá que encapsular o resultado com o componente Select.Display.
Como tags
Utilize o componete Select.DisplayTag como valor da propriedade renderInputValue para renderizar as opções selecionadas como tags.
Acesse a documentação da API do componente para mais detalhes sobre os valores esperados pela propriedade renderInputValue e as propriedades do subcomponente Select.DisplayTag.
Dropdown
Utilize a propriedade dropdownComponent para prover uma versão customizada do Dropdown utilizado para exibir as opções.
Cabeçalho e rodapé
Utilize os subcomponentes Select.Header e Select.Footer para fornecer, respectivamente, um cabeçalho e um rodapé para o Dropdown que exibe as opções.
Indicadores de seleção
Um indicador de seleção é um marcador visual que sinaliza, em conjunto com outros estilos, que a opção está ou não selecionada. Por padrão apenas selects de seleção múltipla possuiem este indicador, no caso, um componente Checkbox.
Utilize a propriedade renderCheck do Select para customizar este indicador de seleção.
Utilize a propriedade renderCheck do subcomponente Select.Option para customizar este indicador de seleção em uma opção em particular.
Indicadores renderizados pela propriedade renderCheck do subcomponente Select.Option tem precedência sobre os do Select.
Conteúdo da opção
Como indicado anteriormente, além de texto, o subcomponente Select.Option pode ter outros componentes como filhos, criando assim opções mais elaboradas.
A seguir alguns casos de uso mais comuns:
Com texto auxiliar
Utilize a propriedade auxiliaryText do subcomponente Select.Option.Label para prover um texto auxiliar à opção.
Com ícone
Você consegue adicionar ícones no início e no fim de opções.
Com Avatar
Você consegue adicionar o componente Avatar no início das opções.
Com Tag ou Badge
Você consegue adicionar os componentes Tag e Badge no fim das opções.