Textarea — ARC UI

Components

Textarea

input

hybrid

<arc-textarea>

Overview

Guidelines

When to use

Always provide a `label` so the field is accessible to screen readers
Set `placeholder` to show an example value, not as a replacement for the label
Use `maxlength` when there is a backend or UX limit so users get immediate feedback
Choose an appropriate `rows` value that reflects the expected content length
Use `resize="none"` when the textarea sits inside a fixed-height layout that cannot reflow
Pair with the Form component for coordinated validation and submission
Use the `error` prop to surface server-side validation messages after submission

When not to use

Do not use Textarea for single-line fields like names or emails -- use Input instead
Do not use placeholder text as the only label -- it disappears on focus and fails accessibility
Do not set both `disabled` and `error` at the same time -- the user cannot act on the error
Do not set extremely low `maxlength` values (under ~20) -- use Input for short values instead
Avoid overriding the built-in border and focus styles with custom CSS -- use design tokens instead
Do not hide the character counter when a maxlength is enforced -- users need that feedback

Features

Integrated uppercase label rendered above the field with automatic aria-labelledby association
Live character counter that appears when `maxlength` is set and turns red at the limit
Configurable resize behaviour via the `resize` prop: vertical, horizontal, both, or none
Adjustable initial height through the `rows` prop (defaults to 4)
Error state with a red border and an inline error message displayed below the field
Readonly mode that allows selection and copying but prevents edits
Disabled state that greys out the field and blocks all interaction
Keyboard-accessible with a visible focus ring following design tokens
Fires `arc-input` on every keystroke and `arc-change` on blur for flexible data binding
CSS custom properties for theming via shared design tokens

Preview

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<div style="width:100%;">
  <arc-textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows="5"
    maxlength="500"
  ></arc-textarea>
</div>

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

<div style={{ width: '100%' }}>
  <Textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows={5}
    maxlength={500}
  />
</div>

<script setup>
import { Textarea } from '@arclux/arc-ui-vue';
</script>

<template>
  <div style="width:100%;">
    <Textarea
      label="Describe your issue"
      placeholder="Please provide as much detail as possible..."
      :rows="5"
      :maxlength="500"
    />
  </div>
</template>

<script>
  import { Textarea } from '@arclux/arc-ui-svelte';
</script>

<div style="width:100%;">
  <Textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows={5}
    maxlength={500}
  />
</div>

import { Component } from '@angular/core';
import { Textarea } from '@arclux/arc-ui-angular';

@Component({
  imports: [Textarea],
  template: `
    <div style="width:100%;">
      <Textarea
        label="Describe your issue"
        placeholder="Please provide as much detail as possible..."
        [rows]="5"
        [maxlength]="500"
      ></Textarea>
    </div>
  `,
})
export class SupportFormComponent {}

import { Textarea } from '@arclux/arc-ui-solid';

<div style={{ width: '100%' }}>
  <Textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows={5}
    maxlength={500}
  />
</div>

import { Textarea } from '@arclux/arc-ui-preact';

<div style={{ width: '100%' }}>
  <Textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows={5}
    maxlength={500}
  />
</div>

<div style="width:100%;">
  <arc-textarea
    label="Describe your issue"
    placeholder="Please provide as much detail as possible..."
    rows="5"
    maxlength="500"
  ></arc-textarea>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-textarea — self-contained, no external CSS needed -->
<div class="arc-textarea">

</div>

API

Prop	Type	Default	Description
`label`	`string`	—	Visible label rendered above the textarea in uppercase. Automatically linked to the field via `aria-labelledby`, ensuring screen readers announce it correctly.
`value`	`string`	`''`	The current text content of the textarea. Updated on every keystroke and emitted via `arc-input` and `arc-change` events.
`placeholder`	`string`	—	Hint text displayed inside the field when it is empty. Use it to show example input -- never as a substitute for the label.
`rows`	`number`	`4`	The number of visible text rows that set the initial height of the textarea. Does not limit content length -- the user can scroll or resize beyond this height.
`maxlength`	`number`	`0`	Maximum number of characters allowed. When set to a value greater than 0, a live counter appears below the field showing current length vs. limit, turning red when the limit is reached.
`resize`	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Controls whether and in which direction the user can drag to resize the textarea. Defaults to vertical-only resizing.
`disabled`	`boolean`	`false`	Prevents user interaction and applies a muted visual treatment at 40% opacity. The field value is excluded from form submission when disabled.
`readonly`	`boolean`	`false`	Allows the user to select and copy text but prevents editing. The field has a subtle background change to indicate its read-only state.
`error`	`string`	—	Error message string. When non-empty, the textarea border turns red and the message is displayed below the field with `role="alert"` for screen reader announcement.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the textarea size. Options: 'sm', 'md', 'lg'.
`auto-resize`	`boolean`	`false`	Automatically grows the textarea height to fit its content. Disables manual resize when enabled.

Events

Event	Description
`arc-input`	Fired on each keystroke with { value } detail
`arc-change`	Fired on blur when value has changed