Description

Provide details about your project

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<InputArea label="Description" placeholder="Enter a description..." description="Provide details about your project" />

Import

import { InputArea, Textarea } from "kumo-svelte/components/input";

Usage

With Built-in Field (Recommended)

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

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<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. Provide aria-label or aria-labelledby for accessibility.

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

Examples

With Label

Bio

Max 500 characters

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

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

Custom Row Count

Use the rows prop to control the initial height.

2 rows

4 rows (default)

8 rows

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<div class="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)

Error styling is automatically applied when the error prop is truthy.

Message

Message must be at least 10 characters

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<InputArea label="Message" placeholder="Enter your message" value="Hi" error="Message must be at least 10 characters" />

Error State (Object)

InputArea supports the same error API as Input, including validity-matched error objects. This demo uses a simple string error for clarity.

Feedback

Feedback must be at least 20 characters

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<InputArea label="Feedback" value="Bad" error="Feedback must be at least 20 characters" minlength={20} />

Sizes

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

Extra Small

Small

Base

Large

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

<div class="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

Disabled field

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

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

Bare InputArea

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

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

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

Optional Field

Set required={false} to show optional text after the label.

Additional Notes (optional)

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

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

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

Worker Script

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

{#snippet labelTooltip()}
  Enter your Cloudflare Worker script code here
{/snippet}

<InputArea
  label="Worker Script"
  {labelTooltip}
  placeholder="export default &#123; async fetch(request) &#123; ... &#125; &#125;"
  rows={4}
/>

Snippet Label

The label prop accepts a string or snippet for rich formatting.

Notes for review

<script lang="ts">
  import { InputArea } from "kumo-svelte/components/input";
</script>

{#snippet label()}
  <span>Notes for <strong>review</strong></span>
{/snippet}

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

API Reference

InputArea

Prop	Type	Default
description	`Snippet \| string`	—
error	`string \| { message: Snippet \| string; match: FieldErrorMatch }`	—
label	`Snippet \| string`	—
labelTooltip	`Snippet`	—
onValueChange	`(value: string) => void`	—
size	`KumoInputSize`	`KUMO_INPUT_DEFAULT_VARIANTS.size`
value	`string \| undefined`	`bindable`
variant	`KumoInputVariant`	—

Accessibility

Label Requirement

InputArea requires an accessible name via one of:

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

Error Association

Error messages are rendered alongside the textarea through the built-in Field wrapper.