Skip to content
comp0

comp0

Fields

Text Area

A multi-line native text box with the same label and feedback pieces.

When to use it: Use it when people need to write a note, message, or longer answer.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Text Area.tsxtsx
import { Label, TextArea, TextField } from "@comp0/react";

export function Example() {
  return (
    <TextField as="div" className="flex max-w-xs flex-col gap-1.5">
      <Label className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
        Feedback
      </Label>
      <TextArea
        className="min-h-28 w-full rounded border border-zinc-950/10 bg-white px-3 py-2.5 text-base text-zinc-950 outline-teal-600 focus-visible:outline-2 sm:py-2 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-50 dark:outline-teal-400"
        name="feedback"
        placeholder="Tell us what you think."
      />
    </TextField>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. TextField

    Optional field provider; it owns no DOM by default. Does not add a DOM element.

  2. Label

    Native label for the text area. Owns a DOM element.

  3. TextArea

    Native multi-line control that owns typing and submission. Owns a DOM element.

  4. Description / FieldErrorOptional

    Optional linked help or error text. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start a TextField with Label.

  2. 2

    Add the supporting parts

    Put TextArea inside it instead of Input.

  3. 3

    Make the behavior clear

    Give TextArea a name so the full text submits.

    Exampletsx
    <TextField><Label>Notes</Label><TextArea name="notes" /></TextField>

Keyboard

⇥
Moves to and from the native text area.

Forms and accessibility

TextArea submits its native name and multi-line value.

Accessibility checklist

  • Give the multi-line box a visible Label.
  • Explain character limits in Description when they matter.
  • Use FieldError to state what needs fixing.

API reference

Importtsx
import { Description, FieldError, Label, TextArea, TextField } from "@comp0/react";

TextField

Context only

Optional field provider; it owns no DOM by default.

PropTypeDescription
valuestringControlled field value.
defaultValuestringInitial field value.
onChange(value: string) => voidReceives the next value.
disabled / invalid / requiredbooleanField-wide states shared with every part.

Label

DOM element

Native label for the text area.

PropTypeDescription
htmlForstringAuto-wired to the field control; set it only to override.

TextArea

DOM element

Native multi-line control that owns typing and submission.

PropTypeDescription
namestringSubmission name for the text.
rowsnumberVisible line count.
placeholderstringHint text; never a replacement for Label.
disabled / requiredbooleanOverride the field-wide state for this control.

Description / FieldError

OptionalDOM element

Optional linked help or error text.

PropTypeDescription
forceMountbooleanFieldError only: keep it rendered while the field is valid.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-disabled]

on TextArea

The surrounding field is disabled.
[data-invalid]

on TextArea

The surrounding field is invalid.

Keep exploring