Textarea

Textarea accepts native attributes and wires label, helper text, error text, and ARIA relationships.

import { Textarea } from '@manti-ui/react';

export default function TextareaBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <Textarea
        label="Recipe notes"
        placeholder="Add preparation notes"
        description="Shown below the field while there is no error."
      />
    </div>
  );
}

Appearance and state

Use variant="fill" for a neutral filled control. Set autoResize to grow with content and maxHeight to cap it.

requiredIndicator={null} hides only the visual marker. Use focusRing="none" when an outer product shell owns focus styling.

Small

Medium

Large

Auto-resize

Recipe notes

Please add at least three sentences.

Locked notes

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Field label, associated with the textarea.
`hint`	`ReactNode`	—	Helper text shown below the control when there is no error.
`description`	`ReactNode`	—	Alias for hint, useful for textarea helper copy.
`error`	`ReactNode`	—	Error message. Presence sets the invalid state and replaces helper text.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`'default' \| 'fill'`	`'default'`	Visual treatment for the control.
`fullWidth`	`boolean`	—	Stretch to fill the available inline space.
`rows`	`number`	`3`	Initial textarea height in text rows.
`autoResize`	`boolean`	—	Grow the textarea to fit its content.
`maxHeight`	`CSSProperties["maxHeight"]`	—	Maximum height used with autoResize or native scrolling.
`resize`	`'none' \| 'vertical'`	`'vertical'`	Native resize affordance.
`requiredIndicator`	`ReactNode \| null`	`'*'`	Visual marker for required fields. Null hides only the marker.
`focusRing`	`'control' \| 'none'`	`'control'`	Choose whether the Manti control owns visible focus.
`...rest`	`TextareaHTMLAttributes`	—	Any native textarea attribute (placeholder, value, onChange, maxLength, disabled, required...).

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="field"][data-part="root"]`	The field container.
`label`	`[data-scope="field"][data-part="label"]`	The field label.
`required`	`[data-scope="field"][data-part="required"]`	The required asterisk (when required).
`control`	`[data-scope="field"][data-part="control"]`	The textarea frame.
`input`	`[data-scope="field"][data-part="input"]`	The native textarea.
`hint`	`[data-scope="field"][data-part="hint"]`	Helper text below the control.
`error`	`[data-scope="field"][data-part="error"]`	Error message below the control (when error).

Textarea and Input share the field scope.

Tokens

Token	Controls
`--manti-field-height`	height
`--manti-field-padding-x`	padding x
`--manti-field-padding-y`	padding y
`--manti-field-font-size`	font size
`--manti-field-addon-padding-x`	addon padding x

Last updated 13 September 2026