Skip to main content

​
Overview

Enter a description…
Default
Focused text…
Focus
Short
⚠ Must be at least 20 characters
Disabled
Disabled
Textarea extends the Input pattern to multi-line content. It supports labels, placeholder text, helper text, validation states, and optional character count display. It can auto-grow with content when autoResize is enabled.

​
Installation

npm install @araf-ds/core

​
Usage

import { Textarea } from "@araf-ds/core"

export default function Example() {
  return (
    <Textarea
      label="Description"
      placeholder="Enter a description..."
    />
  )
}

​
Variants

​
Default

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

​
With Helper Text

Tell us about yourself…
Maximum 240 characters
<Textarea
  label="Bio"
  placeholder="Tell us about yourself..."
  helperText="Maximum 240 characters"
/>

​
Required Field

Write your message here…
<Textarea label="Message" required placeholder="Write your message here..." />

​
Error State

Short bio.
Bio must be at least 20 characters
<Textarea
  label="Bio"
  state="error"
  helperText="Bio must be at least 20 characters"
/>

​
With Character Count

What’s happening today?
Keep it short and sweet22 / 280
<Textarea
  label="Tweet"
  maxLength={280}
  showCount
  placeholder="What's happening?"
/>

​
States

StateBorderRingHelper text color
Default#D0D5DD—#667085
Focus#0479CE#CDE4F5 4px—
Error#DC2626—#B42318
Success#039855—#027A48
Disabled#E5E7EB——
<Textarea state="default" />
<Textarea state="error" helperText="This field is required" />
<Textarea state="success" helperText="Looks good!" />
<Textarea disabled />
Avoid hiding a textarea when it is unavailable. Use disabled so users can still see the field exists.

​
API Reference

​
label
string
Label displayed above the textarea.
​
placeholder
string
Placeholder text shown when the field is empty.
​
helperText
string
Helper or error message displayed below the textarea.
​
state
string
default:"default"
Validation state. Values: default · error · success · disabled
​
rows
number
default:"3"
Initial number of visible rows.
​
autoResize
boolean
default:"false"
Automatically grows the height to fit content.
​
maxLength
number
Maximum character limit.
​
showCount
boolean
default:"false"
Displays a live character count below the textarea.
​
required
boolean
default:"false"
Marks the label with a required asterisk indicator.
​
disabled
boolean
default:"false"
Disables the textarea and applies the disabled visual style.
​
value
string
Controlled value of the textarea.
​
onChange
(e: ChangeEvent) => void
Change event handler.
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Textarea uses a native <textarea> element with semantic <label> association via id/htmlFor
  • Error messages are linked via aria-describedby so screen readers announce them
  • Required fields use the required HTML attribute in addition to the visual asterisk
  • disabled uses the native disabled attribute — the element is excluded from tab order
  • Character count updates are announced via aria-live="polite" when showCount is enabled
  • Focus ring (0 0 0 4px #CDE4F5) meets WCAG 2.1 AA contrast requirements

​
Do’s & Don’ts

Do

  • Use Textarea for open-ended input (descriptions, comments, notes)
  • Always provide a visible label — never rely on placeholder alone
  • Use helperText to set character expectations before the user types
  • Use showCount + maxLength when length is enforced

Don't

  • Don’t use Textarea for short single-line inputs — use Input instead
  • Don’t show error state until after the user has interacted with the field
  • Don’t set a fixed height when content length is unpredictable — use autoResize
  • Don’t use placeholder text as a substitute for a label