Design System do Laboratório

Tema

BaseSelect ​

Seleção de uma opção numa lista. Usa o <select> do navegador, com a lista nativa no celular e no teclado. Dentro de um BaseField, se liga sozinho ao rótulo, à ajuda e ao erro, como o BaseInput.

Define o limite de aditivo.

Valor do v-model: renovation, (vazio) e (vazio).

Uso ​

  • Use quando houver de 4 a 15 opções. Com 3 ou menos, use BaseRadioGroup: todas as opções ficam à vista. Com muitas opções, prefira um campo de busca.
  • Passe as opções em options ({ value, label, disabled }) ou escreva <option> e <optgroup> no slot padrão. As do options vêm primeiro.
  • O v-model é sempre string: o value da opção escolhida, ou '' quando nada foi escolhido.
  • placeholder cria a primeira opção, com valor '', e o texto aparece em cinza enquanto nada foi escolhido. Diga o que escolher: "Escolha o fiscal", não "Selecione".
  • Em campo opcional, a opção do placeholder pode ser escolhida de novo para limpar o valor; use um texto que faça sentido como escolha, por exemplo "Todas as coordenadorias".
  • Em campo obrigatório (required no BaseField ou no BaseSelect), a opção do placeholder continua na lista; se ela ficar escolhida, o navegador acusa o campo vazio ao enviar.
  • Opção indisponível fica com disabled: true. Se ela nunca pode ser escolhida, tire-a da lista.
  • O <select> nativo não tem somente leitura. Para mostrar um valor que não pode mudar, use BaseInput com readonly e o texto da opção.
  • invalid e warn exigem invalid-text/warn-text: sem texto, o único sinal visível seria a cor da borda. Dentro do BaseField, passe invalid-text. Fora dele, dê um nome ao campo com aria-label e ligue a mensagem com aria-describedby; os dois vão para o <select>.

Anatomia ​

  1. Caixa: mostra a opção escolhida, ou o texto de placeholder em cinza enquanto nada foi escolhido. A altura vem de size.
  2. Seta: decorativa, à direita.
  3. Lista de opções: a do navegador, com as opções de options e as do slot.

Rótulo, ajuda e erro vêm do BaseField em volta.

Estados ​

Marta Coelho já é a gestora deste contrato. Escolha outro fiscal.

Tipo diferente do informado no projeto básico.

Fora do BaseField ​

invalid e required também valem direto no BaseSelect, por exemplo numa linha de tabela sem rótulo visível. Dê o nome com aria-label e ligue a mensagem com aria-describedby.

Escolha o fiscal que conferiu a medição 28.

Tamanhos ​

Faça e não faça ​

FaçaNão faça
Use para 4 a 15 opções, como a lista de fiscais.Use para "Sim" e "Não". Com 3 opções ou menos, use BaseRadioGroup.
Escreva no placeholder o que escolher: "Escolha o fiscal".Escreva só "Selecione".
Para mostrar um valor que não pode mudar, use BaseInput com readonly.Desabilite o seletor só para mostrar o valor.

Estilo ​

PropriedadeToken
Fundo--tj-field-01; desabilitado --tj-field-disabled
Borda--tj-border-strong-01, hover --tj-border-strong-02, foco --tj-border-interactive
Foco--tj-ring; com erro ou aviso, também um contorno sólido de 2 px na cor do estado, halo --tj-ring-danger no erro
Texto--tj-text-primary; vazio (placeholder) --tj-text-helper
Seta--tj-icon-primary; desabilitado --tj-icon-secondary; ícone chevron-down de 16 px (--tj-icon-sm)
Erro--tj-support-error-text
Aviso--tj-support-warning-text (borda)
Altura--tj-control-sm/md/lg

A seta é um BaseIcon, não a imagem do Bootstrap: assim ela muda de cor com o tema escuro.

Código ​

vue
<BaseField label="Fiscal designado" :invalid="showError" invalid-text="Escolha outro fiscal" required>
  <BaseSelect v-model="contract.inspector" :options="inspectors" placeholder="Escolha o fiscal" />
</BaseField>

Propriedades ​

Propriedade Tipo Padrão Descrição
optionsSelectOption[][]{ value: string, label: string, disabled?: boolean }
placeholderstring—Primeira opção, com valor ''
size'sm' | 'md' | 'lg''md'Altura
disabledbooleanfalseDesabilita a lista
invalidbooleanfalseMarca o erro; dentro de um BaseField, vale também o do campo
requiredbooleanfalseObrigatório no formulário; dentro de um BaseField, vale também o do campo
v-modelstring''Valor da opção escolhida
SlotDescrição
padrão<option> e <optgroup> extras, depois das do options
EventoCargaQuando
update:modelValuestringA pessoa escolhe outra opção

Outros atributos (name, aria-label, autocomplete) vão para o <select>; class e style vão para o contêiner, para a seta acompanhar a largura do campo.

Acessibilidade ​

  • Não há padrão do WAI-ARIA APG para o <select> nativo: o navegador já dá o papel, o nome e o teclado.
  • É o <select> nativo: o navegador e o leitor de tela já sabem anunciar e operar, e o teclado segue o sistema (setas, primeira letra, Alt+↓/F4 no Windows, Espaço ou setas no macOS abrem a lista; Enter/Espaço confirmam, Esc fecha sem mudar).
  • O rótulo é um <label for> ligado ao campo; clicar no rótulo foca o campo.
  • Ajuda, erro e aviso ficam em aria-describedby. Com erro, o campo recebe aria-invalid="true". Com invalid-text ou warn-text, a cor não é o único sinal: há ícone e texto. Por isso os dois são obrigatórios junto com invalid e warn.
  • O foco aparece com o anel --tj-ring, também no tema escuro. No modo de alto contraste do Windows, onde a sombra some, o foco vira um contorno na cor Highlight do sistema.
  • A seta é decorativa (aria-hidden).
  • O texto do placeholder usa --tj-text-helper, que passa 4,5:1 nos dois temas.
  • Testado com axe em todos os estados e tamanhos, com options, com <optgroup> no slot e fora do BaseField (com aria-label e aria-describedby).

Teclado:

TeclaO que faz
TabLeva o foco ao seletor. Desabilitado, ele sai da ordem do Tab.
↑ e ↓No Windows, trocam a opção sem abrir a lista. No macOS, abrem a lista.
Primeira letraVai para a opção que começa com ela.
Alt + ↓ ou F4No Windows, abrem a lista.
EspaçoNo macOS, abre a lista. Com a lista aberta, confirma a opção.
EnterCom a lista aberta, confirma a opção.
EscCom a lista aberta, fecha sem mudar a escolha.