Textarea

Campo de texto multilinha para captura de conteúdo extenso, com suporte a validação, contador de caracteres e integração nativa com formulários. Usa a tag `mk-textarea`.

O mk-textarea é o campo de texto multilinha do Makuco UI. Suporta texto de suporte, mensagem de erro, contador de caracteres, número de linhas visíveis e integração nativa com formulários via ElementInternals.

Integração com Angular Forms

Para usar com ngModel ou FormControl, importe MkTextareaModule em vez de MkTextareaComponent. Veja Formulários com Angular.

Padrão

import { MkTextarea } from '@db1/makuco-ui-react';

<MkTextarea label="Mensagem" placeholder="Digite sua mensagem..." />

<mk-textarea label="Mensagem" placeholder="Digite sua mensagem..."></mk-textarea>

Texto de suporte

Use supportText para exibir uma dica abaixo do campo quando não há erro.

<MkTextarea label="Bio" supportText="Máximo 200 caracteres." placeholder="Conte algo sobre você..." />

<mk-textarea label="Bio" support-text="Máximo 200 caracteres." placeholder="Conte algo sobre você..."></mk-textarea>

Estado de erro

Defina errorMessage para ativar o estado inválido e exibir a mensagem abaixo do campo.

<MkTextarea label="Descrição" errorMessage="Campo obrigatório." />

<mk-textarea label="Descrição" error-message="Campo obrigatório."></mk-textarea>

Obrigatório

<MkTextarea label="Observações" required />

<mk-textarea label="Observações" required></mk-textarea>

Desabilitado e somente leitura

<MkTextarea label="Desabilitado" disabled value="Conteúdo não editável" />
<MkTextarea label="Somente leitura" readonly value="Apenas visualização" />

<mk-textarea label="Desabilitado" [disabled]="true" value="Conteúdo não editável"></mk-textarea>
<mk-textarea label="Somente leitura" [readonly]="true" value="Apenas visualização"></mk-textarea>

Contador de caracteres

Defina maxLength para habilitar o contador atual/máximo abaixo do campo.

<MkTextarea label="Bio" maxLength={200} placeholder="Conte algo sobre você..." />

<mk-textarea label="Bio" [max-length]="200" placeholder="Conte algo sobre você..."></mk-textarea>

Número de linhas

Use rows para controlar a altura inicial do campo em linhas de texto visíveis.

<MkTextarea label="Resumo" rows={4} />
<MkTextarea label="Detalhes" rows={8} />

<mk-textarea label="Resumo" [rows]="4"></mk-textarea>
<mk-textarea label="Detalhes" [rows]="8"></mk-textarea>

Formulários

O mk-textarea é form-associated e integra com <form> nativo via ElementInternals.

<form onSubmit={handleSubmit}>
  <MkTextarea label="Mensagem" name="mensagem" required />
  <MkButton type="submit">Enviar</MkButton>
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-textarea label="Mensagem" name="mensagem" required></mk-textarea>
  <mk-button type="submit">Enviar</mk-button>
</form>

Autofill do navegador

Defina autocomplete com um token do HTML para habilitar o autofill do navegador.

<MkTextarea label="Endereço completo" name="street-address" autocomplete="street-address" rows={2} />

<mk-textarea label="Endereço completo" name="street-address" autocomplete="street-address" rows="2"></mk-textarea>

Modo código

variant="code" aplica a família --db1-typography-family-code (Fira Code, com fallback monoespaçado do sistema) no mesmo tamanho do texto padrão, e desliga o corretor ortográfico, a autocapitalização e a autocorreção do navegador. Use para editar JSON, código ou identificadores.

<MkTextarea label="Payload" variant="code" rows={4} />

<mk-textarea label="Payload" variant="code" rows="4"></mk-textarea>

Corretor e autocapitalização

spellcheck e autocapitalize são repassados ao textarea nativo. Sem valor, valem os padrões do navegador; com variant="code", spellcheck é false e autocapitalize é "off". Valores definidos no componente prevalecem sobre os da variante.

<MkTextarea label="Comentário" spellcheck={false} autocapitalize="off" rows={2} />

<mk-textarea label="Comentário" [spellcheck]="false" autocapitalize="off" rows="2"></mk-textarea>

Props

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Texto do rótulo exibido acima do campo. Obrigatório.
`value`	`string`	—	Valor controlado do textarea.
`placeholder`	`string`	—	Placeholder exibido quando o campo está vazio.
`supportText`	`string`	—	Texto auxiliar abaixo do campo, visível quando não há erro.
`helperText`	`string`	—	Texto exibido no ícone de ajuda ao lado do rótulo. Quando omitido, o ícone não é exibido.
`errorMessage`	`string`	—	Mensagem de erro. Quando definida, ativa o estado inválido.
`maxLength`	`number`	—	Limite de caracteres. Habilita o contador `atual/máximo` abaixo do campo.
`rows`	`number`	`1`	Número de linhas de texto visíveis — controla a altura inicial do campo.
`required`	`boolean`	`false`	Marca o campo como obrigatório com asterisco no rótulo.
`disabled`	`boolean`	`false`	Desabilita o campo, impedindo qualquer interação.
`readonly`	`boolean`	`false`	Torna o campo somente leitura — foco permitido, mas valor não pode ser alterado.
`name`	`string`	—	Atributo `name` para envio em formulários.
`requiredMessage`	`string`	`"This field is required"`	Mensagem do tooltip de validação nativa quando `required` e vazio. Substitua para i18n.
`autocomplete`	`string`	—	Token `autocomplete` do HTML repassado ao textarea nativo, para habilitar o autofill do navegador.
`variant`	`"code"`	—	`"code"` usa fonte monoespaçada e desliga, por padrão, corretor, autocapitalização e autocorreção.
`spellcheck`	`boolean`	—	Corretor ortográfico do navegador, repassado ao textarea nativo. Sem valor, vale o padrão do navegador (ou `false` com `variant="code"`).
`autocapitalize`	`string`	—	Autocapitalização dos teclados virtuais (`"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`), repassada ao textarea nativo. Sem valor, vale o padrão do navegador (ou `"off"` com `variant="code"`).

Eventos

Evento	Payload	Descrição
`mkInput`	`string`	Emitido a cada tecla digitada com o valor atual do campo.
`mkChange`	`string`	Emitido quando o campo perde o foco e o valor foi alterado.
`mkFocus`	`void`	Emitido quando o campo recebe foco.
`mkBlur`	`void`	Emitido quando o campo perde foco.

Acessibilidade

Usa <textarea> nativo internamente — foco e navegação por teclado estão inclusos.
aria-invalid="true" aplicado automaticamente quando errorMessage está definida.
aria-describedby aponta para o texto de suporte ou mensagem de erro.
O asterisco de campo obrigatório tem aria-hidden="true" — a semântica de obrigatoriedade é transmitida pelo atributo required nativo.
Com delegatesFocus: true, o foco é delegado ao <textarea> interno ao clicar no host.
Com variant="code", o corretor ortográfico fica desligado e o leitor de tela não anuncia erros de ortografia no conteúdo.

Textarea

On this page