Skip to main content
The TextArea component provides a multi-line text input field with support for labels, helper text, and validation states.

​
Basic usage

import { TextArea } from '@raystack/apsara';

function App() {
  return <TextArea label="Description" placeholder="Enter description" />;
}

​
Props

​
label
string
The label text displayed above the textarea.
​
required
boolean
Whether the textarea is required. When false, displays “(optional)” next to the label.
​
infoTooltip
string
Tooltip text to display next to the label.
​
helperText
string
Helper text displayed below the textarea.
​
error
boolean
Whether the textarea is in an error state.
​
disabled
boolean
Whether the textarea is disabled.
​
width
string | number
default:"'100%'"
Width of the textarea container.
​
value
string
The controlled value of the textarea.
​
onChange
(event: React.ChangeEvent<HTMLTextAreaElement>) => void
Callback fired when the textarea value changes.
​
placeholder
string
Placeholder text to display when the textarea is empty.
​
className
string
Additional CSS classes to apply to the textarea element.
​
style
React.CSSProperties
Additional inline styles to apply to the textarea element.

​
With label and helper text

<TextArea
  label="Comments"
  helperText="Please provide detailed feedback"
  placeholder="Type your comments here..."
/>

​
Required field

<TextArea
  label="Description"
  required
  placeholder="This field is required"
/>

​
Optional field

<TextArea
  label="Additional notes"
  required={false}
  placeholder="Optional field"
/>

​
With info tooltip

<TextArea
  label="Bio"
  infoTooltip="Tell us about yourself in a few sentences"
  placeholder="Write your bio..."
/>

​
Error state

<TextArea
  label="Message"
  error
  helperText="Message is required"
  value=""
/>

​
Disabled state

<TextArea
  label="Feedback"
  value="This field is disabled"
  disabled
/>

​
Controlled component

function ControlledTextArea() {
  const [value, setValue] = useState('');

  return (
    <TextArea
      label="Message"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      helperText={`${value.length} characters`}
    />
  );
}

​
Custom width

<TextArea
  label="Short note"
  width="400px"
  placeholder="Enter a short note"
/>

​
Custom rows

<TextArea
  label="Description"
  rows={10}
  placeholder="Longer text area with more rows"
/>

​
Accessibility

  • The TextArea component properly associates labels with the textarea element.
  • Helper text and error messages are accessible to screen readers.
  • The info tooltip icon supports keyboard navigation.
  • The required attribute is properly set for form validation.