Textarea
Multi-line text input field with size variants, width options, and validation states
Overview
The Textarea component provides a styled multi-line text input field with support for different sizes, width behaviors, and validation states. It includes automatic styling for focus, disabled, and error states, with proper accessibility attributes.
Import
import { Textarea } from "@px-ui/core";Usage
<Textarea placeholder="Enter your message" />Examples
Sizes
The Textarea component supports two size variants that control the minimum height.
<Textarea size="sm" placeholder="Small textarea" />
<Textarea size="default" placeholder="Default textarea" />Invalid State
The Textarea component supports validation states through the invalid prop, which applies error styling and sets the appropriate ARIA attributes.
<Textarea placeholder="Valid textarea" />
<Textarea invalid placeholder="Invalid textarea" />
<Textarea disabled placeholder="Disabled textarea" />API Reference
Textarea
A styled multi-line text input component with size, width, and validation customization.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Size variant affecting minimum height |
widthVariant | "enforced" | "full" | "full" | Width behavior - enforced uses a fixed minimum width, full stretches to 100% |
invalid | boolean | false | When true, applies error styling and sets aria-invalid attribute |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from native HTML textarea element including value, onChange, placeholder, disabled, rows, etc.