TextArea Component

The TextArea component provides a robust solution for multi-line text input in forms. Built with accessibility and flexibility in mind, it offers customizable styling, validation states, and seamless integration with your design system.

Key Features

• Accessible Design: Built-in labels and ARIA support

• Multiple Variants: Default and underline styles

• Validation States: Support for required fields and error states

• Auto-resizing: Height adjusts to content while remaining user-resizable

Variants

Default Variant

The standard style with a bordered container:

1
<TextArea
2
    variant="default"
3
    label="Message"
4
    placeholder="Enter your message here"
5
/>

Underline Variant

A minimal style with bottom border only:

1
<TextArea
2
    variant="underline"
3
    label="Minimal Input"
4
    placeholder="Clean, understated design"
5
/>

TextArea Component Props API

States and Examples

Required Fields

1
<TextArea
2
    label="Required Message"
3
    required
4
    placeholder="This field cannot be empty"
5
/>

With Sub-Label

1
<TextArea
2
    label="Your Bio"
3
    subLabel="Maximum 500 characters"
4
    placeholder="Tell us about yourself"
5
/>

Disabled State

1
<TextArea
2
    label="Disabled Input"
3
    disabled
4
    placeholder="This field cannot be edited"
5
/>

Best Practices

1. Labels and Instructions

   • Always provide clear, descriptive labels
   • Use sub-labels for additional context
   • Keep placeholder text minimal

2. Validation and Feedback

   • Clearly indicate required fields
   • Provide immediate validation feedback
   • Use appropriate error messages