Textarea

Displays a multi-line text input field that follows the shadcn/ui design system.

Default

A simple textarea with placeholder and automatic content sizing.

Disabled

Textarea with disabled state.

Required

Textarea with HTML5 required validation.

With Label

Textarea with labels and helper text.

Bio

Your bio will be displayed on your public profile.

Comments

Share your thoughts with the community.

Character Limit

Textarea with maximum character limit using MaxLength parameter.

Tweet (max 280 characters)

0 / 280 characters

Accessibility (ARIA)

Textarea with ARIA attributes for screen readers.

With aria-label

Description

Please provide as much detail as possible.

Invalid textarea (error state styling)

Note the destructive border and ring applied via aria-invalid.

Two-Way Binding

Demonstrating real-time value updates using Value and ValueChanged.

Type something

Updates on every keystroke using Value and ValueChanged parameters.

Current value:

(empty)

Character count: 0

Custom Styling

Override styles with the Class parameter.

Custom border color

Custom height

Success state

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Value	string?	—	The current value. Supports two-way binding with @bind-Value.
Placeholder	string?	—	Placeholder text shown when the textarea is empty.
MaxLength	int?	—	Maximum number of characters allowed.
Disabled	bool	false	Whether the textarea is disabled.
Required	bool	false	Whether the textarea is required for form validation.
AriaLabel	string?	—	aria-label attribute for screen readers.
AriaDescribedBy	string?	—	aria-describedby attribute linking to a description element.
AriaInvalid	bool	false	When true, applies destructive border and ring styling.
Class	string?	—	Additional CSS classes to apply. Custom classes override default styles.

Previous Tabs Next Theme Switcher