Textarea

Sizes

• Textarea supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Full width

• Full width can be enabled by setting fullWidth prop to true.

Disabled

• Disabled state can be enabled by setting disabled prop to true.

• Readonly can be enabled by setting readOnly prop to true.

State

• Currently, Textarea supports 3 state is error, warning and success and can be changed by passing the state prop.

Resizable

• The resizable prop controls how the textarea can be resized by the user.
• Supported values:
  • false (default): Textarea cannot be resized
  • true or 'both': Textarea can be resized both vertically and horizontally
  • 'vertical': Textarea can only be resized vertically
  • 'horizontal': Textarea can only be resized horizontally
• The resizable will be disabled when disabled or readOnly props are set to true.

With Label

• Textarea supports adding Label and HelperText slots.
• Label text can be added via the label prop of Textarea component.
• Helper text can be added via the helperText prop of Textarea component.

• Textarea component allows to include additional content with the main label.
  • You can use the labelPrefix prop to place content before the main label text, such as an icon (e.g., a search 🔍 icon) or a short word.
  • For content that should appear after the main label, like units (e.g., (MB)), an info icon (ⓘ), or other helpful details, use the labelSuffix prop.

Helper Text

• Helper text can be changed by passing the helperText prop.
• The helper text can be displayed in 2 ways: inline and tooltip and can be changed by passing the renderHelperType prop.

Max Length

• Max length can be set by passing the maxLength prop.
• Setting the maxLength prop will show a counter below the textarea.

Character Counting Rule

• Basic Latin characters: Each common letter, number, symbol or punctuation will count as 1 character.
• Space (’ ’): A space between words is counted as 1 character.
• Newlines (\n): A newline character is counted as 1 character.