Elements

Inputs

Single-line text fields with validation states.

Setup

Input styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.




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

Default



<input placeholder="Type here" />

Utilities

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

Colors



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

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

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

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

Size



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

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

Appearance



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

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

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

Inputs of type="search" work on their own, or can be placed in a label to facilitate a search icon.



<label role="button">
    <span x-icon="lucide:search"></span>
    <input type="search" placeholder="Search" aria-label="Search" />
</label>

File Uploads

Inputs of type="file" work on their own, or can be placed in a label to facilitate an upload icon.



<label role="button">
    <input type="file" />
    <span x-icon="lucide:upload"></span>
    Upload
</label>

Form Layouts

Labels

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



<label>
    Email
    <input placeholder="Enter your email" />
</label>

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



<label>
    <data>Email</data>
    <input placeholder="Enter your email" />
</label>

Groups

Horizontally group inputs, buttons, or selects together with a role="group" attribute on the parent container.



<div role="group">
    <input placeholder="Insert email" />
    <button class="brand">Signup</button>
</div>

When these elements are grouped, only the outer elements' outer corners retain their border radii for a seamless appearance.

Validation

Inputs support native HTML5 validation through attributes like required, pattern, minlength, maxlength, min, max, and type="email" / type="url". Style the invalid and valid states with Tailwind pseudo-class variants.



<input type="email" required
    class="user-invalid:border-negative-surface user-valid:border-positive-surface" />

Prefer user-invalid: and user-valid: over the unprefixed invalid: and valid:. They wait until the user has actually engaged with the field, avoiding the awkward "everything is red on page load" effect. See forms for the full variant reference and inline-message patterns.

Styles

Theme

Default inputs use the following theme variables:

Variable Purpose
--color-field-surface Input background color
--color-field-surface-hover Input hover/active background color
--color-field-inverse Text and selection highlight color
--spacing-field-height Input height
--spacing-field-padding Horizontal padding for input content
--radius Border radius for input corners
--transition Transition for interactive states

Customization

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



input {
    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);
    }
}