InputArea
@cloudflare/kumo

InputArea

A multi-line text input for longer content with built-in label, description, and error support.

Provide details about your project

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaBasicDemo() {
  return (
    <InputArea
      label="Description"
      placeholder="Enter a description..."
      description="Provide details about your project"
    />
  );
}

Installation

Barrel 

import { InputArea } from "@cloudflare/kumo";

Granular 

import { InputArea } from "@cloudflare/kumo/components/input";

Textarea is also exported as an alias for InputArea for discoverability when migrating from other libraries.

Usage

With Built-in Field (Recommended)

Use the label prop to enable the built-in Field wrapper with label, description, and error support.

import { InputArea } from "@cloudflare/kumo";

export default function Example() {
  return (
    <InputArea
      label="Description"
      placeholder="Enter a description..."
      description="Provide details about your project"
    />
  );
}

Bare InputArea (Custom Layouts)

For custom form layouts, use InputArea without label. Must provide aria-label or aria-labelledby for accessibility.

import { InputArea } from "@cloudflare/kumo";

export default function Example() {
  return <InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />;
}

Examples

With Label

Max 500 characters

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaWithLabelDemo() {
  return (
    <InputArea
      label="Bio"
      placeholder="Tell us about yourself"
      description="Max 500 characters"
    />
  );
}

Custom Row Count

Use the rows prop to control the initial height.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaRowsDemo() {
  return (
    <div className="flex flex-col gap-4">
      <InputArea label="2 rows" placeholder="Small area" rows={2} />
      <InputArea label="4 rows (default)" placeholder="Medium area" rows={4} />
      <InputArea label="8 rows" placeholder="Large area" rows={8} />
    </div>
  );
}

Error State (String)

Message must be at least 10 characters
 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaErrorStringDemo() {
  return (
    <InputArea
      label="Message"
      placeholder="Enter your message"
      value="Hi"
      variant="error"
      error="Message must be at least 10 characters"
    />
  );
}

Error State (Object)

Use an error object with match for constraint validation.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaErrorObjectDemo() {
  return (
    <InputArea
      label="Feedback"
      value="Bad"
      variant="error"
      error={{
        message: "Feedback must be at least 20 characters",
        match: "tooShort",
      }}
      minLength={20}
    />
  );
}

Sizes

Four sizes available: xs, sm, base (default), lg.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaSizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <InputArea
        size="xs"
        label="Extra Small"
        placeholder="Extra small textarea"
      />
      <InputArea size="sm" label="Small" placeholder="Small textarea" />
      <InputArea label="Base" placeholder="Base textarea (default)" />
      <InputArea size="lg" label="Large" placeholder="Large textarea" />
    </div>
  );
}

Disabled 

import { InputArea } from "@cloudflare/kumo";

export function InputAreaDisabledDemo() {
  return (
    <InputArea label="Disabled field" placeholder="Cannot edit" disabled />
  );
}

Bare InputArea

InputArea without label renders as a bare textarea. Must provide aria-label for accessibility.

import { InputArea } from "@cloudflare/kumo";

export function InputAreaBareDemo() {
  return <InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />;
}

Optional Field

Set required={false} to show “(optional)” text after the label.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaOptionalFieldDemo() {
  return (
    <InputArea
      label="Additional Notes"
      required={false}
      placeholder="Any additional information..."
    />
  );
}

Label with Tooltip

Use labelTooltip to add an info icon with additional context on hover.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaLabelTooltipDemo() {
  return (
    <InputArea
      label="Worker Script"
      labelTooltip="Enter your Cloudflare Worker script code here"
      placeholder="export default { async fetch(request) { ... } }"
      rows={4}
    />
  );
}

React Node Label

The label prop accepts ReactNode for rich formatting.

 
import { InputArea } from "@cloudflare/kumo";

export function InputAreaReactNodeLabelDemo() {
  return (
    <InputArea
      label={
        <span>
          Notes for <strong>review</strong>
        </span>
      }
      required
      placeholder="Add notes for the reviewer..."
      rows={3}
    />
  );
}

API Reference

InputArea accepts all standard HTML textarea attributes plus the following:

PropTypeDefault

No component-specific props. Accepts standard HTML attributes.

Accessibility

Label Requirement

InputArea requires an accessible name via one of:

  • label prop (recommended)
  • placeholder + aria-label for bare textareas
  • aria-labelledby for custom label association

Missing accessible names trigger console warnings in development.

Error Association

Error messages are automatically associated with the textarea via ARIA attributes for screen reader announcement.