Textarea

Setup

import { Textarea } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`value`	`string`	Not set	Controlled value
`defaultValue`	`string`	Not set	Default value for uncontrolled usage
`placeholder`	`string`	Not set	Placeholder text
`rows`	`number`	`3`	Number of visible text rows
`minRows`	`number`	Not set	Minimum number of rows when auto-resizing
`maxRows`	`number`	Not set	Maximum number of rows when auto-resizing
`resize`	`enumnoneverticalhorizontalboth`	`vertical`	Resize behavior
`size`	`enumsmmdlg`	`md`	Size variant
`disabled`	`boolean`	`false`	Disabled state
`error`	`boolean`	`false`	Error state
`success`	`boolean`	`false`	Whether to show success/validated styling
`showCharCount`	`boolean`	`false`	Show character counter when maxLength is set
`label`	`string`	Not set	Label text above the textarea
`helperText`	`string`	Not set	Helper text below the textarea
`onChange`	`function`	Not set	Called when the textarea value changes
`onValueChange`	`function`	Not set	Value-first change callback alias: (value: string) => void
`onBlur`	`function`	Not set	Called when textarea loses focus
`onFocus`	`function`	Not set	Called when textarea receives focus
`name`	`string`	Not set	Form field name
`maxLength`	`number`	Not set	Maximum character length
`required`	`boolean`	Not set	Required field
`aria-label`	`string`	Not set	Accessible label for no-visible-label usage
`aria-labelledby`	`string`	Not set	Accessible labelled-by relationship
`aria-describedby`	`string`	Not set	Accessible described-by relationship
`rootProps`	`object`	Not set	HTML attributes applied to the wrapper element
`className`	`string`	Not set	Wrapper class name
`style`	`object`	Not set	Wrapper styles

Usage Guidelines

When to use

Collecting multi-line text (comments, descriptions)
Free-form text input that may span multiple lines
Message composition fields
Code or content editing

When not to use

Single-line input (use Input)
Rich text editing (use rich text editor)
Selecting from predefined options (use Select)

Best practices

Set appropriate rows for expected content length
Use placeholder to show example format
Show character count when maxLength is set
Consider auto-resize for better UX

Accessibility

Always provide a visible label
Use helperText for format hints
Error messages should be descriptive

Inputalternative

Use Input for single-line text

Setup

Examples

Default

With Helper Text

Error State

Disabled

Custom Rows

Sizes

With Root Props

Success State

With Character Counter

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Default

With Helper Text

Error State

Disabled

Custom Rows

Sizes

With Root Props

Success State

With Character Counter

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components