Textarea

A real <textarea> that grows with its content via field-sizing: content, instead of a JavaScript scrollHeight-measuring resize handler. Falls back to a manual resize handle in browsers that don't support it yet.

Feedback

It grows as you type, no JavaScript resize handler.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Message

Markdown is supported.

Unstyled

Same component — Kernel look stripped. See Platforms.

label

placeholder

description

invalid

error message

required

disabled

hide label

label offset

Usage

<Textarea label="Message" placeholder="Write something…" description="Markdown is supported." errorMessage="A message is required." />

<kernel-textarea label="Message" placeholder="Write something…" description="Markdown is supported." error-message="A message is required."></kernel-textarea>

Props

Props for Textarea.
Prop	Type	Default
`label`	ReactNode (required)	—
`hideLabel`	boolean	false
`description`	ReactNode	—
`errorMessage`	ReactNode	—
`invalid`	boolean	false
`className`	string \| (state) => string — control	—
`wrapperClassName`	string \| (state) => string	—
`labelClassName`	string \| (state) => string	—
`descriptionClassName`	string \| (state) => string	—
`errorClassName`	string \| (state) => string	—

Floating labels

Same slot hooks and data-focused / data-filledstate as TextField, for floating-label animations without targeting generated CSS-module class names.