Textarea Component

Multiline text input with thin ink borders and orbit hover interaction.

Variants

Default variant has visible border, subtle variant is borderless with light fill.

Default

Subtle

Basic Textarea

With Label

Your Message

Share your feedback or suggestions with us.

With Default Value

Bio

Disabled State

Disabled Textarea

Error/Invalid State

Message (Required)

Please enter a message. This field cannot be empty.

The error state shows a red border to indicate validation errors.

With Character Limit

Tweet-style Message

Share your thoughts in 280 characters or less.

0/280

With Custom ScrollArea

Long Content

The Orbit Capsule design system represents a fresh approach to UI design. Key principles: 1. Modular Independence - Each element is a standalone capsule 2. Extreme Roundness - Pill shapes and large border radius create warmth 3. Thin Ink Stroke - 1px black borders define clear boundaries 4. Orbit Hover - External offset outline on hover/focus This textarea uses a custom ScrollArea component for better scrollbar styling that matches the overall theme aesthetic. The scrollbar features: - Solid black track border - Rounded thumb that matches the theme - Smooth hover states - Better accessibility than native scrollbars Feel free to scroll and see how the custom scrollbar enhances the user experience!

Uses the custom ScrollArea component for a themed scrollbar experience.