Textarea

Componente de entrada de texto multilinha para conteúdo de texto mais longo.

Importação

import { Textarea } from 'asterui'

Exemplos

Textarea Básico

Textarea simples com placeholder.

</>

import { Textarea } from 'asterui'

function App() {
  return (
      <Textarea placeholder="Type your message here" />
    )
}

export default App

Com Linhas

Controle a altura com o atributo rows.

</>

import { Textarea } from 'asterui'

function App() {
  return (
      <Textarea rows={6} placeholder="Tall textarea" />
    )
}

export default App

Tamanhos

Cinco tamanhos: xs, sm, md, lg e xl.

</>

import { Textarea, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Textarea size="xs" placeholder="Extra small" />
        <Textarea size="sm" placeholder="Small" />
        <Textarea size="md" placeholder="Medium (default)" />
        <Textarea size="lg" placeholder="Large" />
        <Textarea size="xl" placeholder="Extra large" />
      </Space>
    )
}

export default App

Cores

Variantes de cor para diferentes estados.

</>

import { Textarea, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Textarea color="primary" placeholder="Primary" />
        <Textarea color="secondary" placeholder="Secondary" />
        <Textarea color="accent" placeholder="Accent" />
        <Textarea color="info" placeholder="Info" />
        <Textarea color="success" placeholder="Success" />
        <Textarea color="warning" placeholder="Warning" />
        <Textarea color="error" placeholder="Error" />
      </Space>
    )
}

export default App

Variante Fantasma

Estilo com fundo transparente.

</>

import { Textarea } from 'asterui'

function App() {
  return (
      <Textarea ghost placeholder="Ghost textarea" />
    )
}

export default App

Estado Desabilitado

Textarea desabilitado não interativo.

</>

import { Textarea } from 'asterui'

function App() {
  return (
      <Textarea disabled placeholder="Disabled textarea" />
    )
}

export default App

Em Formulário

Textarea com validação de formulário.

</>

Message*

 

Send Message

Form Submitted

Form data:

null

Cancel

Close modal

import { Textarea, Form, Button, Modal } from 'asterui'
import { useState } from 'react'

function App() {
  const [submittedData, setSubmittedData] = useState<Record<string, unknown> | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const handleSubmit = (values: Record<string, unknown>) => {
    setSubmittedData(values);
    setIsModalOpen(true);
  };
  
  return (
      <Form onFinish={handleSubmit}>
        <Form.Item
          name="message"
          label="Message"
          required
          rules={{
            required: 'Please enter a message',
            min: { value: 10, message: 'Message must be at least 10 characters' },
          }}
        >
          <Textarea rows={4} placeholder="Enter your message here" />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Send Message
          </Button>
        </Form.Item>
      </Form>
  
      <Modal
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        title="Form Submitted"
        footer={null}
      >
        <div className="py-4">
          <p className="mb-4">Form data:</p>
          <pre className="bg-base-200 p-4 rounded-lg overflow-auto max-h-96">
            {JSON.stringify(submittedData, null, 2)}
          </pre>
        </div>
      </Modal>
    )
}

export default App

API

Propriedade	Descrição	Tipo	Padrão
size	Tamanho do textarea	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Tema de cor do textarea	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Variante de estilo fantasma	boolean	false
bordered	Mostrar borda	boolean	true
disabled	Estado desabilitado	boolean	false
placeholder	Texto de placeholder	string	-
rows	Número de linhas de texto visíveis	number	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa <textarea> nativo para acessibilidade completa
• Funciona com labels de formulário padrão
• Estado desabilitado é comunicado corretamente
• Redimensionável por padrão para conforto do usuário