Source

Command Palette

Search for a command to run...

Textarea

Multi-line text input for collecting longer form content.

About Textarea

A styled textarea component for multi-line text input. Includes built-in focus states, error indicators (via aria-invalid), and disabled styling. Supports all standard HTML textarea attributes for flexibility.

Installation

Import the Textarea component from LSD:
import { Textarea } from '@nipsys/lsd'

export default function MyComponent() {
  return <Textarea />
}

Usage

The simplest form of the component with default styling.
Basic

Features

Additional features and capabilities of the component.
Character Count

States

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to/from the textarea
ARIA Attributes
Proper ARIA attributes for screen readers
• aria-invalid indicates error state to assistive technologies• Use aria-label or aria-labelledby when no visible label exists
Focus States
Visible focus indicators for keyboard users
• Follows standard HTML textarea focus behavior. Focus indicators use the LSD design system's focus ring styling for visibility.