Inputs

Textarea

A controlled multi-line text input that integrates with Field.

TextareaView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Message

Supports labels, descriptions, errors, and inherited invalid state.

tsx

import { Cell } from "retend";

import { Field, Textarea } from "innate-ui";
import classes from "../docs.module.css";

export function TextareaDemo() {
  const message = Cell.source("");

  return (
    <Field id="textarea-demo" class={classes.textareaDemo}>
      <Field.Label>Message</Field.Label>
      <Textarea
        value={message}
        onChange={(value) => message.set(value)}
        placeholder="Write a message"
      />
      <Field.Description>
        Supports labels, descriptions, errors, and inherited invalid state.
      </Field.Description>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

TextareaProps

Prop	Type	Default
`value` Textarea value.	`JSX.ValueOrCell<string>`	`—`
`ref` Receives the native textarea element.	`SourceCell<HTMLTextAreaElement \| null>`	`—`
`invalid` Whether the textarea is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the textarea.	`JSX.ValueOrCell<string \| undefined>`	`—`
`onChange` Called with the current string value after input.	`(value: string) => void`	`—`
`onInput` Native input handler called before `onChange`.	`EventHandlerProp<HTMLTextAreaElement, Event>`	`—`

Inspect the typed source →