Textarea

OverviewCopy Anchor Link

The Textarea component is designed for entering free-form text that spans multiple lines. It provides enough space for users to write descriptions, comments, notes, or other longer content while supporting the same labeling, help text, and validation patterns as a standard input.

When to useCopy Anchor Link

Use the Textarea component when:

• Users need to enter messages, comments, or notes of varying length.
• The expected input consists of one or more sentences, such as descriptions or explanations, rather than a single value like a name or email address. For single-line values, use an Input.
• Users need to add free-form information to a record, for example internal comments, signing instructions, or additional context.
• The content doesn't need document-level formatting such as headings, images, or tables — for that, use a Rich Text Editor. If it only needs light emphasis (bold, italic, underline, lists, links), add the optional formatting toolbar instead of reaching for a full editor.
• The input is intended for longer text, not short fixed-length values such as verification codes or PINs. For verification codes or PINs, use a Code Field.

AnatomyCopy Anchor Link

Textarea reuses .nm-input__label, .nm-input__container, and .nm-input__help from input without modification. The only new pieces are the nm-input--textarea modifier on the wrapper and a <textarea class="nm-input__field"> instead of <input>.

Tokens and values that drive each partCopy Anchor Link

SizesCopy Anchor Link

Textarea uses the same five input sizes for its label, border radius, and padding; height instead comes from the rows attribute on the <textarea> itself, not from the size modifier.

Choosing a row countCopy Anchor Link

Set rows to the number of lines you expect the average answer to take — 2–3 for a short note, 5–6 for an open-ended description. Let the user grow it further with the resize handle rather than guessing high and leaving empty space.

Interaction & validation statesCopy Anchor Link

Textarea shares every state with input: hover, focus, read-only, and the three validation intents.

Interaction statesCopy Anchor Link

No disabled state. As with every Namirial field, use nm-input--readonly instead of the native disabled attribute — the content stays legible and still submits with the form.

Validation statesCopy Anchor Link

Error · warning · success — nm-input--error, nm-input--warning, nm-input--success

Resize behaviorCopy Anchor Link

resize: vertical lets the user drag the bottom-right corner to grow the field, without letting it stretch wider than its container and break the surrounding layout. Never set resize: none unless the field's height is already generous enough for the longest realistic answer.

ToolbarCopy Anchor Link

Textarea can surface a lightweight formatting toolbar above the field for content that benefits from basic emphasis, without the overhead of a full Rich Text Editor. Nest a .nm-input__toolbar row before the <textarea> and add nm-input__container--toolbar to the container — it stacks the toolbar above the field and clips both to the container's rounded corners.

• The toolbar row is presentational scaffolding here — wire each button to your editing library's formatting commands (document.execCommand is deprecated; prefer a library-native command API) and toggle aria-pressed on .nm-input__toolbar-btn to reflect active formatting at the cursor.
• The Normal control opens a block-style menu (paragraph, heading levels, quote); keep it a <button aria-haspopup="listbox"> wired to your dropdown/menu component, not a native <select>, so its width can hug the label.
• Keyboard users still need the standard shortcuts (Cmd/Ctrl+B, +I, +U) — the toolbar buttons should mirror those, not replace them.

Light & dark themeCopy Anchor Link

Both previews are locked — they don't follow the page theme switcher.

Do & don'tCopy Anchor Link

AccessibilityCopy Anchor Link

SemanticsCopy Anchor Link

• Associate the label the same way as input — for/id or nesting inside .nm-input__label.
• If you enforce a character limit, expose the remaining count in a live region, not just visually.

KeyboardCopy Anchor Link

• Tab moves focus in and out; the resize handle is native and keyboard-inaccessible by design — don't make resizing the only way to see full content, ensure overflow: auto handles scrolling too.
• Enter inserts a newline (unlike input, where Enter often submits a form) — never intercept Enter to submit a form containing a textarea unless the user expects that.

LabelingCopy Anchor Link

• Use aria-describedby to connect help text and any character-count indicator to the field.
• On error, set aria-invalid="true" alongside the nm-input--error class.

PlaygroundCopy Anchor Link

Token referenceCopy Anchor Link

Textarea inherits every --nm-input-* token from Input — there is no separate token group. A handful of rules extend the base system:

ImplementationCopy Anchor Link

<link rel="stylesheet" href="namirial-theme.css">

<div class="nm-input nm-input--textarea nm-input--md">
  <label class="nm-input__label">Message</label>
  <div class="nm-input__container">
    <textarea class="nm-input__field" rows="4" placeholder="Add a note for the signer…"></textarea>
  </div>
  <span class="nm-input__help">Visible to everyone on this document.</span>
</div>

With the optional toolbar:

<div class="nm-input nm-input--textarea nm-input--md">
  <label class="nm-input__label">Label<span class="nm-input__required">(required)</span></label>
  <div class="nm-input__container nm-input__container--toolbar">
    <div class="nm-input__toolbar">
      <button type="button" class="nm-input__toolbar-select">Normal<svg><!-- chevron-down --></svg></button>
      <span class="nm-input__toolbar-divider"></span>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Bold"><svg><!-- bold --></svg></button>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Italic"><svg><!-- italic --></svg></button>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Underline"><svg><!-- underline --></svg></button>
      <span class="nm-input__toolbar-divider"></span>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Numbered list"><svg><!-- list-ordered --></svg></button>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Bulleted list"><svg><!-- list --></svg></button>
      <span class="nm-input__toolbar-divider"></span>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Insert link"><svg><!-- link --></svg></button>
      <span class="nm-input__toolbar-divider"></span>
      <button type="button" class="nm-input__toolbar-btn" aria-label="Clear formatting"><svg><!-- remove-formatting --></svg></button>
    </div>
    <textarea class="nm-input__field" rows="5" placeholder="Textarea placeholder"></textarea>
  </div>
</div>

CSS classesCopy Anchor Link