Textarea | Fragments

Preview

<Textarea
  label="Description"
  placeholder="Enter a description..."
/>

Installation

npx @usefragments/cli add textarea

Writes src/fragments/ui/components/Textarea plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

With Helper Text

Supporting text sits under the box.

<Textarea
  label="Bio"
  placeholder="Tell us about yourself..."
  helperText="Max 500 characters"
  maxLength={500}
/>

Error State

Red border, and helperText becomes the reason.

<Textarea
  label="Comments"
  placeholder="Add your comments..."
  error
  helperText="This field is required"
/>

Disabled

Dimmed and unfocusable.

<Textarea
  label="Notes"
  placeholder="Cannot edit..."
  disabled
/>

Custom Rows

rows={6} doubles the visible height before scrolling.

<Textarea
  label="Long Description"
  placeholder="Enter detailed information..."
  rows={6}
/>

Sizes

Three heights: sm, md, lg.

<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '400px' }}>
  <Textarea label="Small" size="sm" placeholder="Small textarea" />
  <Textarea label="Medium" size="md" placeholder="Medium textarea" />
  <Textarea label="Large" size="lg" placeholder="Large textarea" />
</div>

Fixed Height

resize="none" removes the drag handle so the box stays put.

<Textarea
  label="Notes"
  placeholder="Add notes..."
  resize="none"
/>

With Character Counter

Live count against maxLength sits below the box.

<Textarea
  label="Bio"
  placeholder="Tell us about yourself..."
  maxLength={200}
  showCharCount
/>

API

Component 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
`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

Accessibility

Give every textarea a visible label
Put format hints in helperText, not the placeholder
Error text says what to fix, not just that it failed

Guidance

Use when

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

Avoid when

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

InputalternativeUse Input for single-line text

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.