Textarea
多行输入:与 Input 同款尺寸与失败态,autosize 时高度跟随内容。
安装
添加组件
pnpm dlx @elyri/cli@latest add textarea示例
基础用法
默认的多行输入,可拖拽调整高度。
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea placeholder="写点什么……" />;
}尺寸
三档尺寸:sm / md / lg。
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return (
<div>
<Textarea size="sm" placeholder="Small" />
<Textarea size="md" placeholder="Medium" />
<Textarea size="lg" placeholder="Large" />
</div>
);
}自适应高度
autosize 开启后高度随内容增长,禁止手动拉伸。
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea autosize placeholder="输入长文本试试" />;
}校验失败
红框提示并标记 aria-invalid。
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea invalid defaultValue="这段内容不符合要求" />;
}禁用
原生 disabled 状态,不可输入。
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea placeholder="不可输入" disabled />;
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 控件尺寸:sm / md / lg |
invalid | boolean | false | 校验失败态:红框并标记 aria-invalid |
autosize | boolean | false | 高度随内容自适应,开启后禁止手动拉伸 |
...rest | TextareaHTMLAttributes | — | 其余属性透传给原生 textarea |