Introduction

A multi-line text input component that integrates with the Field context. It can be used standalone or as part of a Field component.

Usage

Standalone with Field integration

Textarea automatically wraps itself in a Field if you provide label, helperText, etc.

import { Textarea } from "../components/ui";

export default function MyPage() {
  return (
    <Textarea
      label="Bio"
      placeholder="Write here..."
      rows={4}
      minLength={10}
      interactive
    />
  );
}

Variants

import { Stack } from "../design-system/jsx";
import { Textarea } from "../components/ui";

export default function MyPage() {
  return (
    <Stack gap="4">
      <Textarea variant="outline" placeholder="Outline" />
      <Textarea variant="surface" placeholder="Surface" />
      <Textarea variant="subtle" placeholder="Subtle" />
      <Textarea variant="flushed" placeholder="Flushed" />
    </Stack>
  );
}

Sizes

import { Stack } from "../design-system/jsx";
import { Textarea } from "../components/ui";

export default function MyPage() {
  return (
    <Stack gap="4">
      <Textarea size="xs" placeholder="Extra Small" />
      <Textarea size="sm" placeholder="Small" />
      <Textarea size="md" placeholder="Medium" />
      <Textarea size="lg" placeholder="Large" />
      <Textarea size="xl" placeholder="Extra Large" />
    </Stack>
  );
}

Inside a Field component

You can also use it inside a Field component for more complex layouts.

import { Field, Textarea } from "../components/ui";

export default function MyPage() {
  return (
    <Field label="Comments">
      <Textarea placeholder="Leave a comment..." interactive />
    </Field>
  );
}

CMS Page Builder

This component is available as a textarea block in the Page Builder (content/pages/*.json):

{
  "type": "textarea",
  "label": "Bio",
  "helperText": "Tell us about yourself.",
  "rows": 4
}

Props

Prop	Type	Description
class	string	Custom CSS classes.

| variant | `"outline" \ | "surface" \ | "subtle" \ | "flushed"` | The visual style of the textarea. |

| size | `"xs" \ | "sm" \ | "md" \ | "lg" \ | "xl"` | The size of the textarea. |

| resize | `"none" \ | "both" \ | "horizontal" \ | "vertical"` | Whether the textarea can be resized. |

| label | string | The label for the field (when used as a standalone Field). | | helperText | string | The helper text for the field. | | errorText | string | The error text for the field. | | value | string | The current value. | | defaultValue | string | The initial value. | | onValueChange | (val: string) => void | Callback triggered when value changes. | | onInput | (e: any) => void | Event handler for input changes. | | rows | number | Number of visible text lines. | | placeholder | string | Hint text. | | minLength | number | Minimum length validation. |

| validator | `(val: string) => boolean \ | string` | Custom validation logic. |

| interactive | boolean | Forces hydration as an island. |