Textarea Component

The Textarea component provides a multi-line text input field with support for labels, validation, and helper text.

Basic Usage

import { Textarea } from 'nebula-ui';
 
export default function Example() {
  return (
    <Textarea 
      label="Message" 
      placeholder="Enter your message..." 
      rows={4}
    />
  );
}

With Label

Always provide a label for accessibility:

<Textarea 
  label="Description" 
  placeholder="Enter description..." 
  rows={5}
/>

Helper Text

Add helpful instructions below the textarea:

<Textarea 
  label="Feedback" 
  placeholder="Your feedback..."
  helperText="Please provide detailed feedback"
  rows={4}
/>

Error State

Display validation errors:

<Textarea 
  label="Message" 
  placeholder="Enter message..."
  error="Message is required"
  rows={4}
/>

Rows

Control the height of the textarea:

<Textarea rows={3} placeholder="Short message" />
<Textarea rows={6} placeholder="Long message" />
<Textarea rows={10} placeholder="Very long message" />

Full Width

Make the textarea span the full width:

<Textarea 
  fullWidth
  label="Full Width Textarea"
  placeholder="This textarea spans full width"
  rows={4}
/>

Props

Prop	Type	Default	Description
`label`	`string`	-	Label text displayed above textarea
`error`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text displayed below textarea
`fullWidth`	`boolean`	`false`	Makes textarea full width
`rows`	`number`	`4`	Number of visible rows
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	`false`	Disables the textarea

Accessibility

The Textarea component is fully accessible:

Proper label association using htmlFor and id
Error messages are announced to screen readers
Keyboard navigation support
Focus management

Examples

Contact Form

<Textarea 
  label="Message"
  placeholder="Enter your message..."
  helperText="Please provide as much detail as possible"
  rows={6}
  fullWidth
/>

Comment Box

<Textarea 
  label="Add a comment"
  placeholder="Write your comment here..."
  rows={4}
/>

With Validation

const [message, setMessage] = useState('');
const [error, setError] = useState('');
 
const validateMessage = (value: string) => {
  if (value.length < 10) {
    setError('Message must be at least 10 characters');
  } else {
    setError('');
  }
};
 
<Textarea 
  label="Message"
  value={message}
  onChange={(e) => {
    setMessage(e.target.value);
    validateMessage(e.target.value);
  }}
  error={error}
  rows={5}
/>

Best Practices

Always use labels for accessibility
Provide helper text for complex inputs
Show clear error messages when validation fails
Use appropriate row count based on expected content length
Consider maxLength for very long inputs