Primitiveinput

Textarea

Stable

Campo de texto de múltiplas linhas. Continua sendo um textarea nativo — a ordem de preferência da Foundation põe HTML nativo antes de Base UI, e não há controller a acrescentar. Cresce com o que é digitado e usa a barra de rolagem discreta do sistema quando atinge o limite.

Instalação

npx up-web-ds add textarea

Preview

Basic

Notas de acessibilidade

Default

Notas de acessibilidade

With Value

Descrição do itemAparece no catálogo e no preview.

Grows With Content

Notas de acessibilidadeO campo cresce com o texto; nada aqui define rows.

Scrollable

Notas de acessibilidadeAlém do limite de altura, a região rola em vez de continuar crescendo.

Invalid

Notas de acessibilidadeUm item stable precisa declarar o que a revisão verificou, não que ela está pendente.

Disabled

Notas de acessibilidadeIndisponível enquanto o item está incoming.

Read Only

Notas registradas

Composto sobre Base UI Select. A escolha é reportada pelo rótulo do item, não pelo valor bruto.

Vêm da metadata do item.

All states

Basic

Notas de acessibilidade

Default

Notas de acessibilidade

With Value

Descrição do itemAparece no catálogo e no preview.

Grows With Content

Notas de acessibilidadeO campo cresce com o texto; nada aqui define rows.

Scrollable

Notas de acessibilidadeAlém do limite de altura, a região rola em vez de continuar crescendo.

Invalid

Notas de acessibilidadeUm item stable precisa declarar o que a revisão verificou, não que ela está pendente.

Disabled

Notas de acessibilidadeIndisponível enquanto o item está incoming.

Read Only

Notas registradas

Composto sobre Base UI Select. A escolha é reportada pelo rótulo do item, não pelo valor bruto.

Vêm da metadata do item.

Usage

Imports de Textarea

import { Textarea } from '@/components/ui/textarea'
import { useId } from 'react'

Textarea

1
2
3
4
5
6
7
8
9
10
11
12function AccessibilityNotesField() {
  const id = useId()

  return (
    <div className="flex w-full max-w-sm flex-col gap-1.5">
      <label htmlFor={id} className="type-small font-medium">
        Notas de acessibilidade
      </label>
      <Textarea id={id} placeholder="O que a revisão verificou." />
    </div>
  )
}

Props

Estende React.ComponentProps<'textarea'>. Aceita também os atributos padrão de um elemento React (294 não listados).

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: alcançável por Tab, Enter insere quebra de linha em vez de submeter, o campo é nomeado pelo label associado por htmlFor, e aria-invalid com aria-describedby liga a mensagem de erro ao campo. Desabilitado sai da sequência de tabulação; readOnly permanece focalizável e anunciado. Touch verificado em viewport de 375px com emulação de toque: altura mínima de 64px, acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, com texto em 16px abaixo de md para evitar o zoom automático do iOS ao focar. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de cor e sombra do foco não é movimento e permanece: remover uma transição de cor não acomoda ninguém e custa a única pista que o estado tem. Nenhum deslocamento existe aqui para ser desligado. O crescimento por field-sizing-content não é animado.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: input
Status: Stable

Origem e distribuição

Fonte: shadcn registry / textarea
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/textarea.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Input Group