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

 
<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

 
<InputArea label="Bio" placeholder="Tell us about yourself" description="Max 500 characters" />

Custom Row Count

Use the rows prop to control the initial height.

 
<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} />

Error State (String)

Message must be at least 10 characters
 
<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.

 
<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.

 
<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" />

Disabled 

<InputArea label="Disabled field" placeholder="Cannot edit" disabled />

Bare InputArea

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

<InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />

Optional Field

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

 
<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.

 
<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.

 
<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.