TextArea

A multi-line text input component with support for labels, validation states, resizing, and various visual styles.

Import#

import { TextArea } from "asheeui";

Usage#

import { TextArea } from "asheeui";

export default function Basic() {
	return (
		<div className="w-full">
			<TextArea placeholder="Enter your message..." />
		</div>
	);
}

Examples#

Color#

Variant#

Size#

Radius#

With label#

With description#

Rows#

Validation states#

Disabled#

Loading state#

Required#

Custom styling#

With default value#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

TextArea reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <TextArea />
2. Component config: components.textarea in your ashee.config
3. Theme default: defaultVariant / defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    textarea: {
      size: "md",
      radius: "md",
      variant: "bordered",
      color: "primary",
      labelAlign: "left",
      rows: 4,
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  radius: "md",
  variant: "bordered",
  color: "primary",
  status: "default",
  labelAlign: "left",
  rows: 4,
}

Accessibility#

• Renders a native <textarea> element with proper semantics
• Uses aria-invalid for error states
• Uses aria-describedby to associate description and message text
• Uses aria-busy for loading state
• Supports disabled and required attributes natively
• Implements focus-visible rings for keyboard navigation
• Labels are properly associated with htmlFor/id

Notes#

• Rows: The rows prop controls the initial height of the textarea. Users can resize vertically by default.
• Status Colors: When status is set to error, success, or warning, the textarea border reflects the status color.
• Underlined Variant: When variant="underlined", the textarea has no border radius and only a bottom border.
• Virtual Keyboard: The enableVirtualKeyboard prop enables the virtual keyboard integration. Default is true.
• Resizing: The textarea is resizable vertically by default (resize-y). This can be customized via className.