Forms
Field
Label, control, hint and error message. The error shows on :user-invalid or aria-invalid, and field tones color the control and hint.
Example
<div class="grid gap-4 max-w-sm">
<div class="field">
<label class="label label-required" for="f-email">Email</label>
<input id="f-email" type="email" class="input" required placeholder="you@example.com">
<p class="hint">We never share your email.</p>
<p class="error-text">Enter a valid email address.</p>
</div>
<div class="field">
<label class="label" for="f-user">Username</label>
<input id="f-user" class="input" value="mo" aria-invalid="true" aria-describedby="f-user-error">
<p class="error-text" id="f-user-error">Usernames need at least 3 characters.</p>
</div>
<div class="field field-success">
<label class="label" for="f-handle">Handle</label>
<input id="f-handle" class="input" value="monsoon">
<p class="hint">This handle is available.</p>
</div>
</div>Classes
9 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 field. On a <div> in the example. Sets grid display, gap, width, hidden by default, flex display and text color.CSS |
|
| Modifier | Modifier, combined with the field class. On a <label> in the example. Sets inline-flex display, alignment, gap, text size, font weight and text style.CSS |
|
| Part | Part of the field. Not used in the example above. Sets text size, font weight, text style and text color.CSS |
|
| Modifier | Modifier, combined with the field class. On a <label> in the example. Sets generated content, margin and text color.CSS |
|
| Part | Part of the field. On a <p> in the example. Sets text size, text style and text color.CSS |
|
| Part | Part of the field. On a <p> in the example. Sets flex display, alignment, gap, text size, text style and text color.CSS |
|
| Tone | Success tone. On a <div> in the example. Sets text color, and --field-border, --field-tone and --tone.CSS |
|
| Tone | Warning tone. Not used in the example above. Sets text color, and --field-border, --field-tone and --tone.CSS |
|
| Tone | Danger tone. Not used in the example above. Sets text color, and --field-border, --field-tone and --tone.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">
<!-- Field: start from the base class, then add modifiers -->
<div class="grid gap-4 max-w-sm">
<div class="field">
<label class="label label-required" for="f-email">Email</label>
<input id="f-email" type="email" class="input" required placeholder="you@example.com">
<p class="hint">We never share your email.</p>
<p class="error-text">Enter a valid email address.</p>
</div>
<div class="field">
<label class="label" for="f-user">Username</label>
<input id="f-user" class="input" value="mo" aria-invalid="true" aria-describedby="f-user-error">
<p class="error-text" id="f-user-error">Usernames need at least 3 characters.</p>
</div>
<div class="field field-success">
<label class="label" for="f-handle">Handle</label>
<!-- the full example is in the Code tab above -->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.