Textareas

Setup

Textareas styles are included in Manifest CSS or the standalone inputs stylesheet. Both reference theme variables.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.theme.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.input.css" />

Default

<textarea placeholder="Type here"></textarea>

Utilities

Textareas accept Manifest utility classes, which can be stacked in any combination.

Colors

<!-- Brand variant -->
<textarea class="brand" placeholder="Brand"></textarea>

<!-- Accent variant -->
<textarea class="accent" placeholder="Accent"></textarea>

<!-- Positive variant -->
<textarea class="positive" placeholder="Positive"></textarea>

<!-- Negative variant -->
<textarea class="negative" placeholder="Negative"></textarea>

Size

<!-- Small variant -->
<textarea class="sm" placeholder="Small"></textarea>

<!-- Large variant -->
<textarea class="lg" placeholder="Large"></textarea>

Appearance

<!-- No background until hover -->
<textarea class="ghost" placeholder="Ghost"></textarea>

<!-- Border included -->
<textarea class="outlined" placeholder="Outlined"></textarea>

<!-- No background at all -->
<textarea class="transparent" placeholder="Transparent"></textarea>

Resizing

Drag Handle

The CSS resize property or Tailwind's resize utility can be used to control the textarea's resizing behavior with a manual drag handle.

<textarea placeholder="Resize in any direction" class="resize"></textarea>

Automatic

The CSS property field-sizing: content or Tailwind's field-sizing-content utility allow a textarea to auto-resize from its minimum height to fit all content.

<textarea placeholder="Type to resize" class="field-sizing-content"></textarea>

If a resize drag handle is applied and interacted with, the manually-set height will override automatic resizing.

Labels

Placing the textarea and text inside a <label> automatically stacks them with spacing.

<label>
    Message
    <textarea placeholder="Enter your message"></textarea>
</label>

To horizontally inline the label text with the textarea, place the text in a <data> element. This is used as a CSS hook with no semantic impact.

<label>
    <data>Message</data>
    <textarea placeholder="Enter your message"></textarea>
</label>

Styles

Theme

Default textareas use the following theme variables:

Variable	Purpose
`--color-field-surface`	Textarea background color
`--color-field-surface-hover`	Textarea hover/active background color
`--color-field-inverse`	Text and selection highlight color
`--spacing-field-padding`	Padding for textarea content
`--radius`	Border radius for textarea corners
`--transition`	Transition for interactive states

Customization

Modify base textarea styles with custom CSS for the textarea selector.

textarea {
    background-color: #f0f8ff;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    color: #1e40af;

    &::placeholder {
        color: #60a5fa;
    }

    &:focus-visible {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
}