FormTextarea

Overview

The FormTextarea component provides a comprehensive multi-line text input system that combines labels, descriptions, and validation states. It's designed to create accessible, user-friendly forms that require longer text inputs with proper labeling, helpful context, and clear validation feedback while maintaining consistency with the design system.

Usage

import { FormTextarea } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <FormTextarea
      label="Description"
      description="Provide a detailed description of your project."
      placeholder="Enter your description here..."
      rows={4}
      required
    />
  );
}

Examples

Default FormTextarea

The default FormTextarea includes a label and optional description text, providing clear context for users.

1
2
3
4
5

<FormTextarea
  label="Description"
  description="Provide a detailed description of your project"
  placeholder="e.g. A fellowship to destroy the One Ring..."
/>

Required Field

Use the required prop to indicate mandatory fields. This automatically adds a "Required" tag to the label.

1
2
3
4
5
6

<FormTextarea
  label="Message"
  description="Share your thoughts with the council"
  required
  placeholder="Speak, friend, and enter your message here..."
/>

Required Field with Error

When a required field has an error, the "Required" tag changes to error styling to draw more attention.

1
2
3
4
5
6

<FormTextarea
  label="Quest Description"
  required
  error="Your quest description is too short"
  placeholder="Describe your quest in detail..."
/>

Optional Field

Use the optional prop to explicitly indicate non-mandatory fields. This adds an "Optional" badge to the label.

1
2
3
4
5
6

<FormTextarea
  label="Additional Comments"
  description="Any other information you'd like to share"
  optional
  placeholder="Tell us anything else that might be relevant..."
/>

Success State

Indicates successful validation or acceptance of input value. The success icon and text provide positive feedback.

1
2
3
4
5
6
7
8
9
10

<FormTextarea
  rows={4}
  label="Public Key"
  description="Your public key has been verified"
  variant="success"
  defaultValue={`-----BEGIN PUBLIC KEY-----
  MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCridrK
  -----END PUBLIC KEY-----`}
  placeholder="Enter your public key"
/>

Warning State

Used for potentially problematic inputs that don't prevent form submission. Includes a warning icon and explanatory text.

1
2
3
4
5
6

<FormTextarea
  label="Notes"
  description="This content will be visible to all team members"
  variant="warning"
  placeholder="Enter your private notes here"
/>

Error State

Shows validation errors or other issues that need user attention. Features prominent error styling and message.

1
2
3
4
5

<FormTextarea
  label="Code Snippet"
  error="Invalid syntax in your code"
  placeholder="function castRing() { ... }"
/>

Disabled State

Apply when the field should be non-interactive, such as during form submission or based on other field values.

1
2
3
4
5
6
7

<FormTextarea
  label="Terms and Conditions"
  description="Cannot be modified by regular users"
  disabled
  defaultValue="One does not simply walk into Mordor. Its black gates are guarded by more than just Orcs."
  placeholder="Terms and conditions text"
/>

With Default Value

Pre-populated textarea with an initial value that users can modify.

1
2
3
4
5
6

<FormTextarea
  label="Meeting Minutes"
  description="Notes from the Council of Elrond"
  defaultValue="The Ring must be destroyed. It must be taken deep into Mordor and cast back into the fiery chasm from whence it came."
  placeholder="Enter meeting notes"
/>

Read-only State

For displaying non-editable information while maintaining form layout consistency.

1
2
3
4
5
6
7
8
9
10
11

<FormTextarea
  rows={5}
  label="Log Output"
  description="Copy this log for troubleshooting"
  readOnly
  defaultValue="[INFO] Fellowship initialized
  [INFO] Ring bearer assigned: Frodo Baggins 
  [WARN] Detecting nearby Nazgûl 
  [ERROR] Connection to Gondor lost"
  placeholder="Logs will appear here"
/>

Complex Usage

Example of a FormTextarea with multiple props configured for a specific use case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<FormTextarea
    rows={7}
    label="Custom Webhook Payload"
    description="Enter the JSON payload template for your webhook"
    required
    placeholder='{
    "event_type": "ring_destroyed",
    "data": {
    "location": "Mount Doom",
    "timestamp": "{{timestamp}}"
  }
}'
  className="max-w-lg font-mono"
  id="webhook-payload-input"
/>

Features

• Built-in Labeling: Automatic label association with proper accessibility
• Description Support: Optional helper text for additional context
• Validation States: Multiple states (success, warning, error) with appropriate styling
• Required/Optional Indicators: Clear visual indicators for field requirements
• Multi-line Support: Designed for longer text inputs with resizable behavior
• 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 FormTextarea component extends the standard Textarea component props with additional form-specific properties:

Variants

Default

• Standard form textarea with label and optional description
• Use for most multi-line text inputs
• Balanced visual weight and accessibility

Required

• Includes "Required" indicator for mandatory fields
• Use for fields that must be completed
• Clear visual indication of importance

Optional

• Includes "Optional" indicator for non-mandatory fields
• Use for fields that can be left empty
• Provides clarity in forms with mixed requirements

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

Structure

The FormTextarea component is composed of:

1. Label Container - Contains the label text and required/optional indicators
2. Textarea Element - The actual textarea field with validation states
3. Description Text - Optional helper text below the textarea
4. Error Message - Validation error display when applicable
5. Status Icons - Visual indicators for different states

Styling

The component includes default styling with:

• Consistent spacing and typography from design system
• Color-coded validation states for semantic meaning
• Proper label positioning and association
• Resizable textarea behavior
• Dark mode support with appropriate color schemes
• Focus states for accessibility
• Customizable through className props

Custom Styling

You can customize the appearance using className props:

<FormTextarea
  label="Custom Textarea"
  description="Custom description"
  className="custom-form-textarea-class"
  variant="success"
  rows={6}
/>

Accessibility

The FormTextarea component is built with accessibility in mind:

• Label Association: Labels are properly associated with textareas using htmlFor/id
• Error Announcements: Error messages are announced to screen readers using role="alert"
• Required Indicators: Required fields are marked both visually and via aria-required
• Helper Text: Helper text is linked to textareas using aria-describedby
• Validation States: Error states are indicated using aria-invalid
• Screen Reader Support: Announces validation states and requirements appropriately
• Keyboard Navigation: Full keyboard support for all interactions
• Resize Support: Proper handling of textarea resize functionality