PureKit UI logoPureKit UI

Textarea

Multi-line text input field component.

Basic

Simple textarea

With Label

Textarea with label

Shapes

Different border shapes

Main Props

NameTypeDefaultDescription
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
booleanfalseWhether the textarea is disabled
placeholder
string''Placeholder text
label
string''Label text
positionLabel
'top' | 'left''top'Position of the label

Class Props

NameTypeDefaultDescription
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