Inputs

Setup

Inputs 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" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.input.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" />

Search

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

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

File Uploads

Inputs of type="file" work on their own, or can be placed in a label to faciliate 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.

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