Textarea

Overview

The Textarea component provides a versatile multi-line text input system that supports various states, validations, and icon placements. It's designed to collect longer user input with appropriate visual feedback and enhanced usability through icons, while maintaining accessibility and consistent design patterns.

Usage

import { Textarea } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <Textarea
      placeholder="Enter your message here..."
      rows={4}
      variant="default"
      leftIcon={<MessageIcon />}
    />
  );
}

Examples

Default Textarea

The default textarea style with neutral colors. Can include optional icons for better visual context.

1

<Textarea placeholder="All we have to decide is what to do with the time that is given us" />

Success State

Use the success state to indicate valid input or successful validation. The checkmark icon provides immediate visual feedback.

1
2
3
4

<Textarea
  placeholder="Not all those who wander are lost"
  variant="success"
/>

Warning State

The warning state can be used to show potential issues that don't prevent form submission. The alert icon draws attention to the warning state.

1
2
3
4

<Textarea
  placeholder="It's a dangerous business, going out your door"
  variant="warning"
/>

Error State

Use the error state to indicate invalid input that needs correction. The alert icon emphasizes the error state.

1
2
3
4

<Textarea
  placeholder="One Ring to rule them all, One Ring to find them"
  variant="error"
/>

Disabled State

Use the disabled state when user interaction should be prevented, such as during form submission or when the input depends on other conditions.

1
2
3
4

<Textarea
  disabled
  placeholder="Even the smallest person can change the course of the future"
/>

With Default Value

Textarea pre-populated with an initial value that users can modify or build upon.

1
2
3
4

<Textarea
  defaultValue="Speak friend and enter"
  placeholder="The password is mellon"
/>

Character Count

Example of a textarea with character count functionality to help users stay within length limits.

1
2
3
4
5
6
7
8
9
10

<div className="relative">
  <Textarea
    maxLength={100}
    onChange={onChange}
    value="There is some good in this world, and it's worth fighting for."
  />
  <div className="absolute bottom-2 right-3 text-xs text-gray-9">
    62/100
  </div>
</div>

With Icons

Example of a textarea with both leading and trailing icons for enhanced functionality.

1
2
3
4
5

<Textarea
  leftIcon={<m className="h-4 w-4" />}
  placeholder="Write your thoughts here"
  rightIcon={<m className="h-4 w-4" />}
/>

Features

• Multiple States: Different visual styles (default, success, warning, error, disabled) for semantic meaning
• Icon Support: Left and right icon positioning for enhanced visual context
• Character Count: Built-in character counting functionality
• Resizable: Users can resize textareas to fit their content needs
• Accessibility: Full accessibility support with proper ARIA attributes
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes
• Customizable: Extensive styling options through className props

Props

The Textarea component accepts all standard HTML textarea attributes plus the following:

Variants

Default

• Standard textarea with neutral colors
• Use for most multi-line text inputs
• Balanced visual weight and accessibility

Success

• Green styling for positive validation states
• Use for successfully validated inputs
• Encourages positive user feedback

Warning

• Yellow/orange styling for cautionary states
• Use for inputs that need attention but aren't errors
• Indicates potential issues

Error

• Red styling for validation errors
• Use for failed validation or critical issues
• Clearly indicates problems that need resolution

Disabled

• Grayed out styling for non-interactive state
• Use when user interaction should be prevented
• Clear visual indication of unavailability

Structure

The Textarea component is composed of:

1. Textarea Container - Main wrapper with styling and positioning
2. Left Icon - Optional icon on the left side
3. Textarea Element - The actual textarea field
4. Right Icon - Optional icon on the right side
5. Character Count - Optional character counting display

Styling

The component includes default styling with:

• Consistent padding and border radius
• Color-coded variants for semantic meaning
• Smooth transitions for state changes
• Resizable behavior for user flexibility
• Dark mode support with appropriate color schemes
• Focus states for accessibility
• Customizable through className props

Custom Styling

You can customize the appearance using the className prop:

<Textarea
  placeholder="Custom styled textarea"
  className="custom-textarea-class"
  variant="success"
  rows={6}
/>

Accessibility

The Textarea component is built with accessibility in mind:

• Semantic HTML: Uses proper textarea elements with appropriate attributes
• ARIA Attributes: Proper ARIA labels and descriptions for screen readers
• Keyboard Navigation: Full keyboard support including Tab navigation
• Focus Management: Clear focus indicators and logical tab order
• Screen Reader Support: Announces textarea states and validation appropriately
• High Contrast: Maintains proper contrast ratios across all variants
• Resize Support: Proper handling of textarea resize functionality