TextArea is a form input component that allows users to enter multi-line text values. It supports both controlled and uncontrolled modes, with auto-resizing capabilities.
Basic usage
import { TextArea } from 'reshaped';
function Example() {
return (
<TextArea
name="description"
placeholder="Enter a description"
/>
);
}
Controlled component
import { useState } from 'react';
import { TextArea } from 'reshaped';
function ControlledExample() {
const [value, setValue] = useState('');
return (
<TextArea
name="comment"
value={value}
onChange={({ value }) => setValue(value)}
placeholder="Write your comment"
/>
);
}
Uncontrolled component
import { TextArea } from 'reshaped';
function UncontrolledExample() {
return (
<TextArea
name="feedback"
defaultValue="Initial feedback"
onChange={({ name, value }) => console.log(name, value)}
/>
);
}
With FormControl
import { FormControl, TextArea } from 'reshaped';
function FormExample() {
return (
<FormControl>
<FormControl.Label>Description</FormControl.Label>
<TextArea
name="description"
placeholder="Describe your project..."
/>
<FormControl.Helper>
Provide a detailed description of your project.
</FormControl.Helper>
</FormControl>
);
}
Auto-resize
import { TextArea } from 'reshaped';
<TextArea
name="auto"
placeholder="This textarea will auto-resize"
resize="auto"
/>
Variants
import { TextArea } from 'reshaped';
<TextArea variant="outline" name="default" placeholder="Outline (default)" />
<TextArea variant="faded" name="faded" placeholder="Faded variant" />
<TextArea variant="ghost" name="ghost" placeholder="Ghost variant" />
<TextArea variant="headless" name="headless" placeholder="Headless variant" />
import { TextArea } from 'reshaped';
<TextArea size="medium" name="medium" placeholder="Medium (default)" />
<TextArea size="large" name="large" placeholder="Large" />
<TextArea size="xlarge" name="xlarge" placeholder="Extra large" />
Validation
import { FormControl, TextArea } from 'reshaped';
import { useState } from 'react';
function ValidationExample() {
const [value, setValue] = useState('');
const hasError = value.length > 0 && value.length < 10;
return (
<FormControl hasError={hasError}>
<FormControl.Label>Bio</FormControl.Label>
<TextArea
name="bio"
value={value}
onChange={({ value }) => setValue(value)}
placeholder="Tell us about yourself"
/>
<FormControl.Error>
Bio must be at least 10 characters long.
</FormControl.Error>
</FormControl>
);
}
Accessibility
TextArea follows accessibility best practices:
- Uses semantic HTML textarea elements
- Supports ARIA attributes via
inputAttributes
- Works with FormControl for proper label associations
- Keyboard navigable and screen reader friendly
Name of the text area input element
Unique identifier for the text area
Value of the text area, enables controlled mode
Default value of the text area, enables uncontrolled mode
Placeholder text when there is no value
size
'medium' | 'large' | 'xlarge'
default:"medium"
Component size. Supports responsive values.
variant
'outline' | 'faded' | 'ghost' | 'headless'
default:"outline"
Component render variant
Disable the text area user interaction
Show an error state. Automatically inherited when used inside FormControl.
Enable or disable the text area resizing. Supports auto-sizing.
onChange
(args: { name: string, value: string, event: Event }) => void
Callback when the text area value changes
onFocus
(e: React.FocusEvent<HTMLTextAreaElement>) => void
Callback when the text area is focused
onBlur
(e: React.FocusEvent<HTMLTextAreaElement>) => void
Callback when the text area is blurred
Additional classname for the root element
Additional attributes for the root element
Additional attributes for the textarea element. Use for ARIA attributes.