Components
Textarea
A customizable and accessible textarea component for capturing multi-line text input.
Previews with Code
Example 1: Default Textarea
Default Textarea
Example 2: Textarea with Label and Description
Textarea with Label and Description
Please provide a detailed description of your issue.
Installation
The Textarea component is a lightweight and accessible way to capture multi-line text input.
Quickly add the component using:
File Structure
textarea.tsx
Props
The Textarea component accepts the following props for customization:
| Prop | Type | Default |
|---|---|---|
placeholder | string | - |
id | string | - |
className | string | - |
disabled | boolean | false |
Features
The Textarea component includes the following features:
- Responsive Design:
- Fully responsive, adjusting to various container sizes.
- Accessible:
- Includes support for labels and descriptions to enhance usability.
- Customizable Styling:
- Easily style the textarea using Tailwind utility classes.
- Keyboard and Screen Reader Support:
- Fully navigable via keyboard and compatible with screen readers.
Accessibility
The Textarea component is designed with accessibility in mind:
- Keyboard Navigation:
- Focus the textarea using
Taband type as needed.
- Focus the textarea using
- Screen Reader Support:
- Use labels and
aria-describedbyfor additional context.
- Use labels and
- Focusable States:
- Includes clear focus styles for better visibility.
Conclusion
The Textarea component is a versatile, accessible, and customizable tool for capturing multi-line text input. Its responsive design and straightforward API make it a great choice for modern web applications.