InputArea

Description

Provide details about your project

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

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

Installation

Barrel

import { InputArea } from 'kumo-svelte';

Granular

import { InputArea } from 'kumo-svelte/components/input-area';

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';</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. Must provide aria-label or aria-labelledby for accessibility.

<script lang="ts">import { InputArea } from 'kumo-svelte';</script><InputArea placeholder="Add notes..." aria-label="Notes" rows={3} />

Examples

With Label

Bio

Max 500 characters

<script lang="ts">
  import { InputArea } from 'kumo-svelte';
</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';
</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';
</script>

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

Error State (Object)

Use an error object with match for constraint validation.

Feedback

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

<InputArea
  label="Feedback"
  value="Bad"
  error={{
    message: 'Feedback must be at least 20 characters',
    match: 'tooShort'
  }}
  minlength={20}
/>

Sizes

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

Extra Small

Small

Base

Large

<script lang="ts">
  import { InputArea } from 'kumo-svelte';
</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';
</script>

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

Bare InputArea

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

<script lang="ts">
  import { InputArea } from 'kumo-svelte';
</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';
</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';
</script>

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

Snippet Label

The label prop accepts Snippet for rich formatting.

Notes for review *

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

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

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

API Reference

InputArea accepts all standard HTML textarea attributes plus the following:

Prop	Type	Default	Description
class	`string`	-	Additional classes merged onto the root element.
size	`'xs' \| 'sm' \| 'base' \| 'lg'`	`"base"`	Size preset.
variant	`'default' \| 'error'`	`"default"`	Visual variant.
label	`string \| Snippet`	-	Visible label content.
labelTooltip	`string \| Snippet`	-	Optional help content for the label.
description	`string \| Snippet`	-	Supporting description text.
error	`FieldError`	-	Validation error message or matcher.
onValueChange	`(value: string) => void`	-	Called when the value changes.
required	`boolean`	-	Marks the field as required.

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.

Kumo Svelte