Textarea Component

Componente React para texto multilinha, com label, dica, mensagem de erro e validação de campo obrigatório. Compatível com React 18 e 19.

Instalação

npm install @tevui/textarea

Uso

import { Textarea } from "@tevui/textarea";

export default function ExampleComponent() {
  return (
    <Textarea
      id="message"
      name="message"
      label="Mensagem"
      required={true}
      placeholder="Escreva sua mensagem"
      rows={6}
      hasBorder={true}
      borderRadius={8}
      tip={{ size: 12, text: "Informe os detalhes da sua solicitação." }}
      onChange={(event) => console.log(event.target.value)}
    />
  );
}

Propriedades

label e required são obrigatórias na interface TypeScript. As demais propriedades são opcionais.

| Propriedade | Tipo | Padrão | Descrição | | --- | --- | --- | --- | | label | string | — | Texto do label associado ao textarea. | | required | boolean | true em execução | Ativa a validação de preenchimento. | | dataTestId | string | "tevui-textarea-datatestid" | data-testid do contêiner interno. | | disabled | boolean | false | Desabilita o campo. | | labelSize | number | 14 | Tamanho do texto do label em pixels. | | inputSize | number | 14 | Tamanho do texto do textarea em pixels. | | baseColor | string | "#545454" | Cor do label, da dica e da borda opcional. | | baseColorError | string | "#f53434" | Cor aplicada ao estado de erro. | | hasBorder | boolean | — | Exibe uma borda ao redor do label e do campo. | | borderRadius | number | 0 | Raio da borda em pixels, aplicado quando hasBorder está ativo. | | id | string | "tevui-textarea-id" | ID do contêiner interno; o campo recebe textarea-${id}. Use um valor único por instância. | | ariaLabel | string | — | Atributo aria-label aplicado ao label. | | placeholder | string | "" | Texto exibido quando o campo está vazio. | | name | string | Valor de id | Nome do campo no formulário. | | rows | number | 4 | Quantidade de linhas visíveis. | | cols | number | — | Atributo HTML cols; o componente também define largura de 100%. | | tip | TextareaTextProp | — | Dica no formato { text: string, size: number }, com tamanho em pixels. | | error | TextareaErrorProp | — | Erro externo no formato { text: string, size: number }, com tamanho em pixels. | | onClick | (event: React.MouseEvent<HTMLTextAreaElement>) => void | — | Callback de clique no campo. | | onChange | (event: React.ChangeEvent<HTMLTextAreaElement>) => void | — | Callback de alteração, executado após a validação interna. | | onBlur | (event: React.FocusEvent<HTMLTextAreaElement>) => void | — | Callback de perda de foco, executado após a validação interna. |

passwordTextShow e passwordTextHide ainda constam em TextareaProps, mas não possuem comportamento de exibição de senha no textarea.

Validação e erros

Com required={true}, um campo vazio exibe It's required ao alterar o conteúdo ou perder o foco. Preencher o campo remove o erro interno.

A propriedade error tem prioridade sobre a validação interna. Enquanto houver erro, a dica fica oculta e o textarea recebe aria-invalid={true}.

<Textarea
  id="description"
  label="Descrição"
  required={false}
  error={{ size: 12, text: "Revise a descrição informada." }}
/>

Estilos

O CSS está incluído no JavaScript do pacote e é adicionado automaticamente à página no navegador. Basta importar o componente, sem importar CSS separado.

Em aplicações com SSR, os estilos são adicionados quando o JavaScript executa no navegador; não são incluídos automaticamente no HTML gerado pelo servidor.

Estado da exportação do pacote

O arquivo src/index.ts ainda exporta nomes e caminhos do componente Input. Essa entrada precisa ser ajustada para exportar Textarea e seus tipos antes de gerar ou publicar um pacote com o import mostrado acima. No código-fonte deste repositório, o componente está em src/lib/textarea.tsx.