Zone de texte

Composant d’entrée de texte multiligne pour du contenu texte plus long.

Importation

import { Textarea } from 'asterui'

Exemples

Zone de texte de base

Zone de texte simple avec placeholder.

import { Textarea } from 'asterui'

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

export default App

Avec lignes

Contrôler la hauteur avec l'attribut rows.

import { Textarea } from 'asterui'

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

export default App

Tailles

Cinq tailles : xs, sm, md, lg et 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

Couleurs

Variantes de couleurs pour différents états.

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 fantôme

Style d'arrière-plan transparent.

import { Textarea } from 'asterui'

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

export default App

État désactivé

Zone de texte désactivée non interactive.

import { Textarea } from 'asterui'

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

export default App

Dans un formulaire

Zone de texte avec validation de formulaire.

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

Propriété	Description	Type	Défaut
`size`	Taille de la zone de texte	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`-`
`color`	Thème de couleur de la zone de texte	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	`-`
`ghost`	Variante de style fantôme	`boolean`	`false`
`bordered`	Afficher la bordure	`boolean`	`true`
`disabled`	État désactivé	`boolean`	`false`
`placeholder`	Texte de placeholder	`string`	`-`
`rows`	Nombre de lignes de texte visibles	`number`	`-`
`className`	Classes CSS supplémentaires	`string`	`-`
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Utilise le <textarea> natif pour une accessibilité complète
Fonctionne avec les labels de formulaire standard
L’état désactivé est correctement communiqué
Redimensionnable par défaut pour le confort de l’utilisateur