Textarea
Campo de texto de várias linhas que cresce com o conteúdo. Mesmos estados do Input: foco, desabilitado e inválido.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico
Respondemos em até 24 horas.
import { Textarea } from "@t2-educacao/midas";Uso
<Field>
<FieldLabel htmlFor="duvida">Sua dúvida</FieldLabel>
<Textarea id="duvida" placeholder="Escreva aqui" />
</Field>Props
Aceita todas as props de <textarea> (rows, maxLength, value...). A altura mínima é 64px e cresce com o texto (field-sizing: content).
| Prop | Tipo | Descrição |
|---|---|---|
aria-invalid | boolean | Estado de erro |
Exemplos
Com contador
const [texto, setTexto] = useState("");
<Field>
<FieldLabel htmlFor="bio">Bio</FieldLabel>
<Textarea id="bio" maxLength={200} value={texto} onChange={(e) => setTexto(e.target.value)} />
<FieldDescription>{texto.length}/200</FieldDescription>
</Field>Para botões dentro da mesma borda, use InputGroupTextarea (veja InputGroup).
Acessibilidade
- Precisa de label (
FieldLabel htmlForouaria-label).
Spinner
Indicador de carregamento animado. Anuncia "Carregando" para leitores de tela; usado sozinho ou dentro de botões (Button loading).
Toast
Mensagem curta e temporária no canto da tela. Coloque <Toaster /> uma vez no layout e chame toast() de qualquer lugar. Tipos default, success, info, warning, error e promise; título, descrição, ação e botão de fechar.