TextArea

A headless native multiline text input with modality-aware focus state, RAC-style disabled and read-only booleans, validation data attributes, and optional auto-resize behavior.

Anatomy

TextArea is a single-part component that renders a native <textarea>. All native textarea attributes pass straight through.

<script>
	import { TextArea } from '@human-kit/ui';
</script>

<TextArea aria-label="Message" placeholder="Write your message..." required autoResize />

States

Interaction and validation state is exposed through data-* attributes — data-focused, data-focus-visible, data-hovered, data-disabled, data-readonly, data-invalid, data-required, and data-autoresize — so all styling is done with plain CSS or utility classes.

Auto-resize

Enable autoResize when the textarea should grow with content, and bound the height with minRows and maxRows. Leave it off to keep native rows and manual resize behavior.

Usage guidelines

  • Use native textarea props like name, value, placeholder, rows, cols, maxlength, and wrap directly on TextArea.
  • Use disabled, readonly, invalid, and required to control validation and interaction state while keeping native behavior.
  • Enable autoResize when the textarea should grow with content. Use minRows and maxRows to bound the height.
  • Style state with data-focused, data-focus-visible, data-hovered, data-disabled, data-readonly, data-invalid, data-required, and data-autoresize.

Accessibility

  • TextArea renders a native <textarea> and supports bind:value.
  • data-focus-visible follows the shared modality contract and only appears for keyboard or virtual focus.
  • invalid maps to aria-invalid, readonly maps to readonly and aria-readonly, and required maps to required and aria-required.
  • Native textarea semantics already expose multiline textbox behavior, so no manual aria-multiline is needed.

API reference

Root

The textarea control. Renders a native <textarea> and forwards all native attributes while exposing state through data attributes.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-autoresize Present when auto-resize is enabled.
data-disabled Present when the textarea is disabled.
data-focus-visible Present while focus should be visibly indicated (keyboard modality).
data-focused Present while the textarea has focus.
data-hovered Present while the pointer is over the textarea.
data-invalid Present when the textarea is invalid.
data-readonly Present when the textarea is readonly.
data-required Present when the textarea is required.
data-textarea-root Identifies the textarea element.