Textarea

Description

Textarea renders an HTML <textarea> element with configurable row height, resize behavior, and form validation states. The component distinguishes between visual invalid state (red border) and semantic ARIA invalid state (for form frameworks that validate independently).

Import

use maud_ui::primitives::textarea;

Example

use maud_ui::primitives::textarea::{Props, Resize, render};

let feedback = render(Props {
    name: "feedback".into(),
    id: "feedback-field".into(),
    placeholder: "What's on your mind?".into(),
    rows: 5,
    ..Default::default()
});

let invalid_field = render(Props {
    name: "bio".into(),
    aria_invalid: true,
    ..Default::default()
});

Resize Enum

pub enum Resize {
    None,                  // No resizing allowed
    Vertical,              // Resize vertically only
    Horizontal,            // Resize horizontally only
    Both,                  // Resize in both directions
}

Controls CSS resize behavior for the textarea.

Variants

Standard Textarea

Default multi-line input with vertical resize.

render(Props {
    name: "feedback".into(),
    id: "feedback-field".into(),
    placeholder: "Tell us what you think".into(),
    rows: 4,
    ..Default::default()
})

Disabled

Prevents user input and shows disabled styling.

render(Props {
    name: "archived".into(),
    disabled: true,
    value: "This account has been archived".into(),
    ..Default::default()
})

Invalid (Visual)

Shows red border and invalid styling for validation feedback.

render(Props {
    name: "bio".into(),
    invalid: true,
    ..Default::default()
})

Aria Invalid (Semantic)

Sets aria-invalid="true" for screen readers without triggering visual styling. Used when form frameworks validate independently.

render(Props {
    name: "release-notes".into(),
    aria_invalid: true,
    ..Default::default()
})

Required

Indicates a required field (adds HTML required attribute).

render(Props {
    name: "description".into(),
    required: true,
    placeholder: "Describe the issue".into(),
    ..Default::default()
})

Read-Only

Displays text content but prevents editing.

render(Props {
    name: "admin-notes".into(),
    readonly: true,
    value: "Admin-only field. Flagged 2026-04-10.".into(),
    ..Default::default()
})

No Resize

Prevent user resizing (fixed dimensions).

render(Props {
    name: "signature".into(),
    rows: 5,
    resize: Resize::None,
    ..Default::default()
})

Custom Row Height

Adjust visible row count based on expected content length.

render(Props {
    name: "long-form".into(),
    rows: 10,
    placeholder: "Write your full essay here".into(),
    ..Default::default()
})

Related

• Input — Single-line text field
• Label — Pair with textareas for accessibility
• Form — Form field patterns and validation

Shadcn Reference

Maud-ui Textarea maps to shadcn's <Textarea> component with equivalent props and variants.