InputArea

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

Custom Row Count

Use the rows prop to control the initial height.

Error State (String)

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

Error State (Object)

Use an error object with match for constraint validation.

Sizes

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

Disabled

Bare InputArea

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

Optional Field

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

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

Snippet Label

The label prop accepts Snippet for rich formatting.

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.
autoResize	`boolean`	`false`	Automatically resize the textarea based on its content.
minRows	`number`	`1`	Minimum number of rows when auto-resizing.
maxRows	`number`	-	Maximum number of rows before the textarea scrolls.
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