Textarea

Componente de entrada de texto multilínea para contenido de texto más largo.

Importación

import { Textarea } from 'asterui'

Ejemplos

Textarea Básico

Textarea simple con placeholder.

</>

import { Textarea } from 'asterui'

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

export default App

Con Filas

Controla la altura con el atributo rows.

</>

import { Textarea } from 'asterui'

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

export default App

Tamaños

Cinco tamaños: xs, sm, md, lg y 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

Colores

Variantes de color 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 con fondo transparente.

</>

import { Textarea } from 'asterui'

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

export default App

Estado Deshabilitado

Textarea deshabilitado no interactivo.

</>

import { Textarea } from 'asterui'

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

export default App

En Formulario

Textarea con validación de formulario.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
size	Tamaño del textarea	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Tema de color del textarea	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	Variante de estilo fantasma	boolean	false
bordered	Mostrar borde	boolean	true
disabled	Estado deshabilitado	boolean	false
placeholder	Texto de placeholder	string	-
rows	Número de filas de texto visibles	number	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa <textarea> nativo para accesibilidad completa
• Funciona con etiquetas de formulario estándar
• El estado deshabilitado se comunica correctamente
• Redimensionable por defecto para comodidad del usuario