Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in four sizes to fit different UI contexts.
Sizes
Variants#
The Textarea component supports several visual variants.
Variants
Validation States#
Use the state prop to indicate validation status.
States
Resize Behavior#
Control how users can resize the textarea.
Resize
Shadow#
Add elevation with the shadow prop.
Shadow
Custom Rows#
Set the initial visible rows with the rows attribute.
Custom Rows
Disabled State#
Disabled
Controlled Textarea#
Controlled
Usage#
Import
import { Textarea } from "@sugarcoat/ui-nxt";Usage
<Textarea
placeholder="Enter your message"
size="md"
rows={4}
resize="vertical"
/>Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Size of the textarea |
| variant | "default" | "outline" | "ghost" | "glass" | "default" | Visual style variant |
| state | "valid" | "invalid" | - | Validation state of the textarea |
| resize | "none" | "both" | "vertical" | "horizontal" | "vertical" | Resize behavior of the textarea |
| shadow | "none" | "sm" | "md" | "lg" | "inset" | "sm" | Box shadow elevation |
| block | boolean | true | Whether the textarea spans full width |
| animation | boolean | true | Enable transition animations |
| rows | number | - | Number of visible text lines |
| disabled | boolean | false | Whether the textarea is disabled |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Uses native
<textarea>element for full accessibility support - Supports keyboard navigation and focus management
- Disabled state properly communicated to assistive technologies
- Use with
<Label>component for accessible form labels - Validation states should be accompanied by error messages for screen readers