BaseTextarea

Campo de texto de várias linhas, para o que não cabe numa linha só: justificativa, observação, descrição. É o irmão do BaseInput: mesma caixa, mesmos estados e a mesma ligação com o BaseField. A pessoa pode arrastar o canto de baixo para aumentar a altura.

Justificativa da devolução *

O item 5.1 passa do saldo do contrato.

38 / 500

Fica no histórico da medição.

Observação da fiscalização (opcional)

Uso

• Use quando a resposta é um texto livre de mais de uma frase. Para um dado curto, como número do contrato ou e-mail, use o BaseInput.
• Todo campo tem rótulo visível, dado pelo BaseField. O texto de exemplo (placeholder) mostra o que escrever, mas não substitui o rótulo.
• Use maxlength quando o sistema que guarda o texto tem limite. Junte show-count para a pessoa ver quanto falta: o contador mostra "12 / 500" e fica vermelho quando chega ao limite.
• Diga o limite também na ajuda (helper-text) quando ele for uma regra de negócio, como "até 500 caracteres, o espaço da publicação".
• Comece com rows perto do tamanho esperado: 3 para uma frase ou duas, 6 ou mais para uma descrição. O padrão é 3.
• Dentro de um BaseField, o id, a ajuda, o erro, o aviso e o obrigatório se ligam sozinhos.
• O erro diz o que está errado e como corrigir, no invalid-text do BaseField: "Escreva a justificativa para continuar", não "Campo inválido".

Anatomia

1. Rótulo: o texto acima do campo, vindo do label do BaseField. Leva o asterisco com required ou "(opcional)" com optional.
2. Campo: a caixa de texto, com a altura das rows e a alça de redimensionar no canto de baixo.
3. Contador: "12 / 500", abaixo do campo, à direita. Aparece com show-count e maxlength.
4. Mensagem: abaixo do campo, vinda do BaseField. Mostra a ajuda (helper-text), o erro (invalid-text) ou o aviso (warn-text), um de cada vez.

Estados

Inválido

Escreva a justificativa para continuar

Aviso

Medição do mês de outubro, com os itens de alvenaria e de reboco conferidos na visita.

O texto passa de 400 caracteres e pode ser cortado na publicação

Somente leitura

Devolvida para ajuste do item 5.1.

Desabilitado

Limite e contador

Resumo para a publicação

Obra de reforma do fórum de Linhares.

37 / 120

Até 120 caracteres.

Limite atingido

Reforma do fórum de Linhares.

29 / 29

Tamanhos

Pequeno (sm)

Item 4.2 conferido.

Médio (md, padrão)

Item 4.2 conferido.

Grande (lg)

Item 4.2 conferido.

Fora do BaseField

Num formulário em que tudo é obrigatório e os erros aparecem num resumo no alto, o próprio campo recebe required e invalid: dê o nome com aria-label e ligue a mensagem de erro por aria-describedby.

Sem foto.

Item 5.1: descreva o que falta além da foto.

Faça e não faça

Faça	Não faça
Use maxlength com show-count quando há limite, para a pessoa ver quanto falta.	Cortar o texto no servidor sem avisar a pessoa.
Diga no erro como corrigir: "Escreva a justificativa para continuar".	Escrever "Campo inválido".
Use BaseTextarea para texto de várias linhas.	Usar um <textarea> cru: a trava do design system barra.
Use o BaseInput para um dado de uma linha.	Esticar um BaseTextarea para um número de contrato.

Estilo

Herda a caixa do BaseInput (.form-control). O que muda está abaixo.

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
Altura mínima	--tj-control-sm/md/lg; a altura real vem das rows
Contador	--tj-text-helper, --tj-text-sm; no limite --tj-support-error-text
Espaço do contador	--tj-space-1 acima

Código

<BaseField label="Justificativa da devolução" helper-text="Fica no histórico da medição." :invalid="showError" invalid-text="Escreva a justificativa para continuar" required>
  <BaseTextarea v-model="reason" name="reason" :rows="4" :maxlength="500" show-count />
</BaseField>

Propriedades

Propriedade	Tipo	Padrão	Descrição
size	'sm' | 'md' | 'lg'	'md'	Altura mínima e tamanho do texto
rows	number	3	Linhas visíveis antes de a pessoa arrastar o canto; o padrão é 3
placeholder	string	—	Exemplo do que escrever dentro do campo vazio; nunca substitui o rótulo
disabled	boolean	false	Desabilita o campo
readonly	boolean	false	Mostra o texto sem permitir mudança
invalid	boolean	false	Marca o erro; dentro de um BaseField, vale também o do campo. Sem BaseField, ligue a mensagem do erro por aria-describedby
required	boolean	false	Obrigatório no formulário; dentro de um BaseField, vale também o do campo
maxlength	number	—	Limite de caracteres; o navegador para a digitação e a colagem nele
showCount	boolean	false	Mostra "12 / 500" abaixo do campo; só aparece com maxlength
v-model	string	''	Texto

Outros atributos (name, aria-label, autocomplete, spellcheck) e eventos (blur, change) vão direto para o <textarea>. class e style ficam no contêiner, como no BaseInput. Dentro de um BaseField, o id vem do campo e o id passado é ignorado.

Evento	Carga	Quando
update:modelValue	string	A cada letra digitada, colada ou apagada

Acessibilidade

• Não há padrão do WAI-ARIA APG para campo de texto de várias linhas. O BaseTextarea é um <textarea> nativo, com o papel textbox em modo de várias linhas, e o teclado é o do navegador.
• O rótulo é um <label for> ligado ao campo; clicar no rótulo foca o campo.
• Ajuda, erro e aviso ficam em aria-describedby, junto com o contador: o leitor de tela lê as mensagens e o "12 / 500" quando o campo recebe o foco. O contador não anuncia cada letra, para não atrapalhar quem digita.
• Com erro, o campo recebe aria-invalid="true". A cor nunca é o único sinal: o BaseField mostra ícone e texto, desde que venham com invalid-text e warn-text. O contador no limite também traz o número, não só a cor.
• O asterisco de obrigatório fica escondido do leitor de tela, que já anuncia o required.
• O foco usa o anel --tj-ring; com erro ou aviso, um contorno sólido de 2 px na cor do estado.
• Desabilitado, o campo sai da ordem do Tab; somente leitura recebe foco, mas não aceita texto.
• Testado com axe em todos os estados e tamanhos, dentro e fora do BaseField.

Teclado:

Tecla	O que faz
Tab / Shift + Tab	Entra no campo e sai dele.
Letras e números	Escrevem no campo, até o maxlength.
Enter	Quebra a linha. Não envia o formulário.
Ctrl+Z ou Cmd+Z	Desfaz a última digitação, como em qualquer campo nativo.