Forms
Input
Text, email, password, number, search, url and tel inputs with sizes, tones, ghost and filled variants.
Example
<div class="grid gap-3 max-w-sm">
<input type="email" class="input" placeholder="you@example.com" aria-label="Email">
<input type="text" class="input input-sm input-ghost" placeholder="Ghost, small" aria-label="Ghost input">
<input type="url" class="input input-filled" placeholder="https://" aria-label="Website">
<input type="tel" class="input input-success" value="+1 415 555 0132" aria-label="Phone">
<input type="text" class="input input-lg" value="Read only value" readonly aria-label="Read only">
<input type="text" class="input" placeholder="Disabled" disabled aria-label="Disabled input">
</div>Classes
13 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the input. On an <input> in the example. Sets block display, width, height, padding, text size and text style, and 9 custom properties.CSS |
|
| Modifier | Modifier, combined with the input class. Not used in the example above. Sets border.CSS |
|
| Modifier | Modifier, combined with the input class. On an <input> in the example. Sets shadow, and --field-bg, --field-border and --field-bg.CSS |
|
| Modifier | Modifier, combined with the input class. On an <input> in the example. Sets shadow, and --field-bg, --field-border and --field-bg.CSS |
|
| Tone | Primary tone. Not used in the example above. Sets --field-border and --tone.CSS |
|
| Tone | Success tone. On an <input> in the example. Sets --field-border, --field-tone and --tone.CSS |
|
| Tone | Warning tone. Not used in the example above. Sets --field-border, --field-tone and --tone.CSS |
|
| Tone | Danger tone. Not used in the example above. Sets --field-border, --field-tone and --tone.CSS |
|
| Size | Extra small size. Not used in the example above. Sets 4 custom properties.CSS |
|
| Size | Small size. On an <input> in the example. Sets 4 custom properties.CSS |
|
| Size | Medium, the default size. Not used in the example above. Sets 4 custom properties.CSS |
|
| Size | Large size. On an <input> in the example. Sets 4 custom properties.CSS |
|
| Size | Extra large size. Not used in the example above. Sets 4 custom properties.CSS |
Usage
Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<!-- Input: start from the base class, then add modifiers -->
<div class="grid gap-3 max-w-sm">
<input type="email" class="input" placeholder="you@example.com" aria-label="Email">
<input type="text" class="input input-sm input-ghost" placeholder="Ghost, small" aria-label="Ghost input">
<input type="url" class="input input-filled" placeholder="https://" aria-label="Website">
<input type="tel" class="input input-success" value="+1 415 555 0132" aria-label="Phone">
<input type="text" class="input input-lg" value="Read only value" readonly aria-label="Read only">
<input type="text" class="input" placeholder="Disabled" disabled aria-label="Disabled input">
</div>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Give every control a visible
labellinked withfor, or anaria-labelwhen the purpose is obvious from context. Link help and error text witharia-describedby; invalid styles use:user-invalid, so they appear only after the user interacts. - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.