ElyriTextarea
A multiline input sharing the Input sizes and invalid state, with an optional content-driven autosize.
Installation
Add component
pnpm dlx @elyri/cli@latest add textareaExamples
Basic
The default textarea, resizable by dragging.
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea placeholder="写点什么……" />;
}Sizes
Three sizes: 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
With autosize the height follows the content and manual resizing is off.
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea autosize placeholder="输入长文本试试" />;
}Invalid
Red border plus aria-invalid.
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea invalid defaultValue="这段内容不符合要求" />;
}Disabled
The native disabled state.
import { Textarea } from './components/elyri/Textarea';
export function Example() {
return <Textarea placeholder="不可输入" disabled />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Control size: sm / md / lg |
invalid | boolean | false | Invalid state: red border plus aria-invalid |
autosize | boolean | false | Grow the height with the content; disables manual resizing |
...rest | TextareaHTMLAttributes | — | Remaining props are forwarded to the native textarea |