Design System/Atoms/Textarea

Textarea

Multi-line text input. Multiple composition variants for comment boxes, editors, and note fields.

When To Use

  • Use Textarea when the user needs to enter or choose information as part of a larger form or workflow.
  • Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
  • Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

  • Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
  • Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

  • Keep a visible label or an equivalent accessible name attached to the control.
  • Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
  • Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Common HTML props

type, placeholder, value, defaultValue, disabled, required

Example Code

import { Textarea } from "@hilum/ui"

<Textarea placeholder="Write something..." />
<Textarea disabled placeholder="Disabled" />

Textarea · Basic

Default

Multi-line text input

Textarea · With avatar and actions

Comment box with toolbar

Avatar on left, emoji/attachment/mention icons + post button

TC

Textarea · With write/preview tabs

Write and preview tabs

Toggle between editing mode and rendered output

Textarea · Underline with actions

Minimal underline style

No full border — just a bottom line with formatting buttons below

Textarea · Title and pill actions

Issue / task composer

Title input + body textarea + pill buttons for assignee, label, due date