MiHCM
primitives/@mihcm/ui·v0.21.0·stable

Textarea

Multi-line text entry. Shares the variant + invalid model with Input.

ConfiguratorExamplesUsageAccessibilityApi

Textarea

Multi-line text input. Shares the variant and validation model with Input so both can be mixed in a form without restyling.

When to use

  • Long-form text — comments, descriptions, notes, feedback.
  • Structured input — addresses, multi-line data entry.

When NOT to use

  • For single-line text — use Input.
  • For rich text editing — use a dedicated rich-text editor.

Import

import { Textarea } from '@mihcm/ui/Textarea';
import { Label } from '@mihcm/ui/Label';

Basic usage

<div className="space-y-1.5">
  <Label htmlFor="comment">Comment</Label>
  <Textarea id="comment" placeholder="Write your comment..." />
</div>

Variants

VariantUse when
defaultStandard text entry.
destructiveValidation error state. Auto-applied when invalid is set.

Props

PropDefaultDescription
variant"default"Visual style.
invalidfalseSets aria-invalid and switches to destructive styling.
rows3Initial visible rows.
requiredfalseSets aria-required.

The textarea is vertically resizable by default (resize-y).

Composition

  • Always pair with a Label via htmlFor for accessibility.
  • Set invalid to show destructive styling. Pair with an error message below the field.
  • The textarea is vertically resizable by default (resize-y). Pass className="resize-none" to disable.
  • For rich text formatting (bold, links, lists), use RichTextEditor instead.
  • Input — single-line text field.
  • RichTextEditor — formatted multi-line editor.
  • Label — always pair with Textarea.
  • Form — form field integration.