Textarea
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Inline
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Contador
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Texto alternativo para acessibilidade quando não há label visível. Fornece um rótulo para tecnologias assistivas sem exibir visualmente. |
| Tipo | string |
| Valor padrão | --- |
cols
| Atributo | cols |
| Descrição | Número de colunas (caracteres) visíveis no textarea. Define a largura do componente em relação ao número de caracteres por linha. |
| Tipo | number |
| Valor padrão | --- |
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Ajusta a densidade do componente, podendo ser 'small', 'medium' ou 'large'. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
disabled
| Atributo | disabled |
| Descrição | Indica se o textarea está desabilitado. Quando verdadeiro, o usuário não pode interagir com o campo. |
| Tipo | boolean |
| Valor padrão | false |
isInline
| Atributo | is-inline |
| Descrição | Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline). |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
| Descrição | Texto exibido como rótulo do input. |
| Tipo | string |
| Valor padrão | --- |
maxlength
| Atributo | maxlength |
| Descrição | Número máximo de caracteres permitidos no textarea. Se definido como 0, não há limite. |
| Tipo | number |
| Valor padrão | 0 |
name
| Atributo | name |
| Descrição | Nome do campo para identificação no formulário. Necessário para participação correta no envio de formulários e integração com frameworks. |
| Tipo | string |
| Valor padrão | --- |
placeholder
| Atributo | placeholder |
| Descrição | Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário. |
| Tipo | string |
| Valor padrão | --- |
required
| Atributo | required |
| Descrição | Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado. |
| Tipo | boolean |
| Valor padrão | false |
rows
| Atributo | rows |
| Descrição | Número de linhas visíveis no textarea. Define a altura do componente em relação ao número de linhas de texto exibidas. |
| Tipo | number |
| Valor padrão | --- |
showCounter
| Atributo | show-counter |
| Descrição | Mostra o contador com a quantidade máxima de caracteres. |
| Tipo | boolean |
| Valor padrão | false |
state
| Atributo | state |
| Descrição | Define o estado visual do componente, podendo ser 'danger', 'success' ou 'warning'. |
| Tipo | "danger" | "success" | "warning" |
| Valor padrão | --- |
value
| Atributo | value |
| Descrição | Valor exibido no textarea. Pode ser alterado pelo usuário se a propriedade readonly não estiver ativa. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para texto adicional ou instruções a serem exibidos junto ao textarea. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
valueChange | Valor atualizado do textarea | true |
Métodos
checkValidity
| Assinatura | checkValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do textarea for válido, caso contrário false.Se o textarea for inválido, dispara um evento 'invalid'. |
| Parâmetros | --- |
reportValidity
| Assinatura | reportValidity() => Promise<boolean> |
| Descrição | Retorna true se o valor do textarea for válido, caso contrário false.Se for inválido, exibe a mensagem de erro padrão do navegador. |
| Parâmetros | --- |
setCustomValidity
| Assinatura | setCustomValidity(message: string) => Promise<void> |
| Descrição | Define uma mensagem de validação customizada para o textarea. Se a mensagem for uma string vazia, o erro customizado é limpo. |
| Parâmetros | message: |
setValue
| Assinatura | setValue(newValue: string) => Promise<void> |
| Descrição | Define um novo valor para o textarea. |
| Parâmetros | newValue: - O novo valor a ser definido. |