Textarea 文本域

用于较长文本内容的多行文本输入组件。

导入

import { Textarea } from 'asterui'

示例

基础文本域

带占位符的简单文本域。

</>

import { Textarea } from 'asterui'

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

export default App

带行数

使用 rows 属性控制高度。

</>

import { Textarea } from 'asterui'

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

export default App

尺寸

五种尺寸: xs、sm、md、lg 和 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

颜色

不同状态的颜色变体。

</>

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

幽灵变体

透明背景样式。

</>

import { Textarea } from 'asterui'

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

export default App

禁用状态

非交互式禁用文本域。

</>

import { Textarea } from 'asterui'

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

export default App

在表单中

带有表单验证的文本域。

</>

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

属性	描述	类型	默认值
size	文本域大小	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	文本域颜色主题	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
ghost	幽灵样式变体	boolean	false
bordered	显示边框	boolean	true
disabled	禁用状态	boolean	false
placeholder	占位符文本	string	-
rows	可见文本行数	number	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 使用原生 <textarea> 以获得完全的可访问性
• 与标准表单标签配合使用
• 禁用状态得到正确传达
• 默认情况下可调整大小以提高用户舒适度