BaseField e BaseInput

BaseField dá rótulo, ajuda e erro a um campo. BaseInput é o campo de texto. Dentro de um BaseField, o campo se liga sozinho ao rótulo e às mensagens.

Número do contrato *

Formato 000/2026

Valor global (opcional)

R$

Buscar obra

Uso

• Todo campo tem rótulo visível. hide-label só para filtros compactos, quando o contexto já diz o que é.
• A ajuda explica o formato antes do erro acontecer.
• O erro diz o que está errado e como corrigir: "Informe o número no formato 000/2026", não "Campo inválido".
• Marque os obrigatórios com required. Em formulários onde quase tudo é obrigatório, marque os outros com optional.
• Use warn para um valor aceito, mas que merece atenção.

Estados

Inválido

Informe o número no formato 000/2026

Aviso

R$

Valor 40% acima da média das obras

Somente leitura

Desabilitado

Estilo

Propriedade	Token
Fundo	--tj-field-01; desabilitado e somente leitura --tj-field-disabled
Borda	--tj-border-strong-01, hover --tj-border-strong-02, foco --tj-border-interactive
Erro	--tj-support-error-text
Aviso	--tj-support-warning-text (borda e texto); no foco, contorno sólido de 2 px na mesma cor
Rótulo	--tj-text-secondary, 13 px, semibold
Altura	--tj-control-sm/md/lg

Código

<BaseField label="Número do contrato" helper-text="Formato 000/2026" :invalid="erro" invalid-text="Informe o número no formato 000/2026" required>
  <BaseInput v-model="numero" />
</BaseField>

BaseField

Propriedade	Tipo	Descrição
label	string	Rótulo (obrigatório)
helperText	string	Ajuda abaixo do campo
invalid / invalidText	boolean / string	Erro, no lugar da ajuda
warn / warnText	boolean / string	Aviso, no lugar da ajuda
required / optional	boolean	Marca no rótulo
hideLabel	boolean	Rótulo só para leitor de tela

BaseInput

Propriedade	Tipo	Padrão	Descrição
v-model	string	''	Valor
type	'text' | 'email' | 'search' | 'tel' | 'url' | 'password'	'text'	Tipo do campo
size	'sm' | 'md' | 'lg'	'md'	Altura
placeholder, disabled, readonly, required, invalid			Estados
autocomplete, inputmode	string	—	Ajuda o navegador e o teclado do celular
iconStart, prefix, suffix	string	—	Ícone ou texto fixo dentro do campo

Acessibilidade

• O rótulo é um <label for> ligado ao campo; clicar no rótulo foca o campo.
• Ajuda, erro e aviso ficam em aria-describedby; o leitor de tela lê a mensagem junto com o campo.
• Com erro, o campo recebe aria-invalid="true". A cor nunca é o único sinal: há ícone e texto.
• O asterisco de obrigatório fica escondido do leitor de tela, que já anuncia o required.
• Prefixo e sufixo são decorativos (aria-hidden). Coloque a unidade também no rótulo quando ela importa, por exemplo "Valor global (R$)".
• Testado com axe em todos os estados.