Textarea

TSX

import { Textarea } from "@arcadia/ui";

<Textarea placeholder="What should change?" minRows={3} maxRows={8} aria-label="Instructions" />

It grows from minRows (3 by default) to a cap, maxRows or maxHeight (which wins), and scrolls past it: CSS field-sizing: content, with a measured fallback. sm and md are UI text; lg is conversation text, as in the composer. Focus shows through the border, never a ring.

Examples

In a field

Inside Field, with a label and a live description.

Instructions

2 of 6 lines before it scrolls

import { useState } from "react";
import { Field, Textarea } from "@arcadia/ui";

function Autosize() {
  const [text, setText] = useState("Grows with its content.\nType a few more lines: at six it scrolls.");
  return (
    <Field
      label="Instructions"
      description={text.split("\n").length > 6 ? "Past 6 lines it scrolls" : `${text.split("\n").length} of 6 lines before it scrolls`}
    >
      <Textarea value={text} onValueChange={setText} minRows={2} maxRows={6} />
    </Field>
  )

In a form

Controlled with value and onValueChange, submitted natively. On a bad submit the error appears under the field, is tied to it, and focus goes back to it so it is read out.

import { useRef, useState } from "react";

function InAForm() {
  const [text, setText] = useState("");
  const [error, setError] = useState<string | null>(null);
  const field = useRef<HTMLTextAreaElement>(null);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (text.trim().length >= 10) return setError(null);
    setError("Say a little more: at least 10 characters.");
    field.current?.focus();
  }

rootStyle takes where the textarea sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

TSX

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // notes set like conversation text
  notes: { "--textarea-font": "var(--font-size-lg)", "--textarea-lh": "var(--line-height-lg)", "--textarea-tracking": "var(--tracking-lg)" },
});

<Textarea aria-label="Notes" rootStyle={styles.notes} />

Takes	Default	Sets
`TokenRef<Space>`	`var(--space-1-5)`	Block padding (the min height counts it).
`TokenRef<Space>`	`var(--space-2-5)`	Inline padding.
`TokenRef<FontSize>`	`var(--font-size-base)`	Text size.
`TokenRef<LineHeight>`	`var(--line-height-base)`	Line height (one row of `minRows` and `maxRows`).
`TokenRef<Tracking>`	`var(--tracking-base)`	Letter spacing.
`TokenRef<Radius>`	`var(--radius-row)`	Corner radius.
`Paint`	`transparent`	Fill.
`Paint`	`var(--text-1)`	Text colour.
`Paint`	`var(--text-4)`	Text colour when disabled.
`Paint`	`var(--text-3)`	Placeholder colour.
`Paint`	`var(--stroke-2)`	Frame colour (1px) at rest.
`Paint`	`var(--stroke-1)`	Frame colour under the pointer.
`Paint`	`var(--ring)`	Frame colour while focused.
`Paint`	`var(--stroke-4)`	Frame colour when disabled.
`Paint`	`var(--fill-3)`	The halo (`--halo-width`) around a focused frame.

--textarea-lh and --textarea-py also set a row's height for minRows and maxRows. Like Input, each state reads its own knob, and invalid always shows the danger frame.

Usage

Examples

In a field

In a form

Matrix

Customising

Accessibility

API reference