Textarea
Multi-line text input field component.
Basic
Simple textarea
With Label
Textarea with label
Shapes
Different border shapes
Main Props
Name | Type | Default | Description |
---|---|---|---|
border | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '1' | Border width |
focusBorder | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '2' | Border width when focused |
color | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'blue' | Color variant of the textarea |
shape | 'rounded' | 'square' | 'rounded' | Shape of the textarea |
shapeLeft | 'rounded' | 'square' | - | Left side shape |
shapeRight | 'rounded' | 'square' | - | Right side shape |
disabled | boolean | false | Whether the textarea is disabled |
placeholder | string | '' | Placeholder text |
label | string | '' | Label text |
positionLabel | 'top' | 'left' | 'top' | Position of the label |
Class Props
Name | Type | Default | Description |
---|---|---|---|
classNameTextArea | string | '' | CSS class for the textarea element |
classNameRoot | string | '' | CSS class for the root element |
classNameLabel | string | '' | CSS class for the label |
classNameDisabled | string | '' | CSS class when disabled |
className | string | '' | Additional CSS classes |