Textarea

A versatile multi-line text input component that supports various states, validations, and icon placements. Use it to collect longer user input with appropriate visual feedback and enhanced usability through icons.

Default

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" />

States

Textarea components can reflect different states through visual styling:

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 State

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"
/>

Interactive Elements

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>

Textarea with Icons

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

1
2
3
4
5

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

Props

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

Icon Guidelines

When using icons with the Textarea component:

• Icons should be sized appropriately (recommended: 16x16px using h-4 w-4 classes)
• Icons inherit colors based on the textarea's variant state
• Interactive icons should be wrapped in buttons
• Avoid using too many icons which might clutter the interface
• Left icons are typically used for input type indication (notes, description, etc.)
• Right icons are commonly used for interactive elements (expand/collapse, character count toggle, etc.)