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>

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.
`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.

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.

Textarea

On this page