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 

<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 placeholder="Add notes..." aria-label="Notes" rows={3} />

Optional Field 

<InputArea
  label="Additional Notes"
  required={false}
  placeholder="Any additional information..."
/>

Label with Tooltip 

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

React Node Label 

<InputArea
  label={
    <span>
      Notes for <strong>review</strong>
    </span>
  }
  required
  placeholder="Add notes for the reviewer..."
  rows={3}
/>

API Reference

PropTypeDefault

No component-specific props. Accepts standard HTML attributes.