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.

Tipo de obra *

ReformaConstruçãoManutençãoDemolição

Define o limite de aditivo.

Coordenadoria (opcional)

Todas as coordenadoriasFiscalização de ObrasProjetosOrçamento

Fiscal designado *

Escolha o fiscalMarta CoelhoRui AntunesPaulo Ramos

Valor do v-model: reforma, (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>.

Estados

Inválido

Marta CoelhoRui AntunesPaulo Ramos

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

Aviso

ReformaConstruçãoManutençãoDemolição

Tipo diferente do informado no projeto básico.

Desabilitado

ReformaConstruçãoManutençãoDemolição

Tamanhos

Pequeno (sm)

ReformaConstruçãoManutençãoDemolição

Médio (md, padrão)

ReformaConstruçãoManutençãoDemolição

Grande (lg)

ReformaConstruçãoManutençãoDemolição

Estilo

Propriedade	Token
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

<BaseField label="Fiscal designado" :invalid="erro" invalid-text="Escolha outro fiscal" required>
  <BaseSelect v-model="contrato.fiscal" :options="fiscais" placeholder="Escolha o fiscal" />
</BaseField>

Propriedade	Tipo	Padrão	Descrição
v-model	string	''	Valor da opção escolhida
options	SelectOption[]	[]	{ value: string, label: string, disabled?: boolean }
placeholder	string	—	Primeira opção, com valor ''
size	'sm' | 'md' | 'lg'	'md'	Altura
disabled, required, invalid	boolean	—	Estados; dentro do BaseField, também valem os do campo (basta um dos dois)

Slot	Descrição
padrão	<option> e <optgroup> extras, depois das do options

Evento	Carga	Quando
update:modelValue	string	A 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

• É 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).