Monsoon v0.2.0
Made by Alexandre Kohler Star

Forms

Input group

Joins inputs with prefix and suffix addons or buttons; group sizes apply to every child.

Forms8 classesNo JavaScriptLight and dark

Example

Full

Classes

8 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.

ClassTypeWhat it does
Base Base class of the input group. On a <div> in the example. Sets flex display, alignment, width, corner radius, margin and stacking order.
CSS
.input-group > :hover, .input-counter > :hover {
  z-index: 1;
}

.input-group > *, .input-counter > * {
  flex-shrink: 0;
  border-radius: 0;
}
Part Part of the input group. On a <span> in the example. Sets flex display, alignment, gap, padding, text size and text style, and --_line and --_shadow.
CSS
.input-group-addon {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding-inline: var(--field-px, .75rem);
  font-size: var(--field-fs, var(--m-control-fs-md));
  white-space: nowrap;
  color: var(--muted-foreground);
  background-color: var(--muted);
  border: var(--m-border-width) solid var(--_line);
}

.input,
.select,
.textarea,
.file-input,
.color-input,
.otp-input,
.otp-field,
.input-group-addon,
.input-counter-button,
.checkbox,
.radio,
.toggle,
.range {
  --_line: var(--field-border, color-mix(in oklab, var(--border), var(--foreground) 12%));
  --_shadow: color-mix(in oklab, var(--foreground) calc(7% - 7% * var(--mode)), transparent);
}
Part Part of the input group. On a <button> in the example. Sets inline-flex display, alignment, gap, padding, text size and font weight.
CSS
.input-group-button:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

.input-group-button:hover {
  background-color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
}
Size Extra small size. Not used in the example above. Sets 4 custom properties.
CSS
.input-xs, .select-xs, .textarea-xs, .file-input-xs, .input-group-xs {
  --field-h: var(--m-control-h-xs);
  --field-px: .5rem;
  --field-fs: var(--m-control-fs-xs);
  --field-radius: var(--m-radius-sm);
}
Size Small size. On a <div> in the example. Sets 4 custom properties.
CSS
.input-sm,
.select-sm,
.textarea-sm,
.file-input-sm,
.input-group-sm,
.color-input-sm {
  --field-h: var(--m-control-h-sm);
  --field-px: .625rem;
  --field-fs: var(--m-control-fs-sm);
  --field-radius: var(--m-radius-sm);
}
Size Medium, the default size. Not used in the example above. Sets 4 custom properties.
CSS
.input-md, .select-md, .textarea-md, .file-input-md, .input-group-md {
  --field-h: var(--m-control-h-md);
  --field-px: .75rem;
  --field-fs: var(--m-control-fs-md);
  --field-radius: var(--m-radius-md);
}
Size Large size. Not used in the example above. Sets 4 custom properties.
CSS
.input-lg,
.select-lg,
.textarea-lg,
.file-input-lg,
.input-group-lg,
.color-input-lg {
  --field-h: var(--m-control-h-lg);
  --field-px: 1rem;
  --field-fs: var(--m-control-fs-lg);
  --field-radius: var(--m-radius-lg);
}
Size Extra large size. Not used in the example above. Sets 4 custom properties.
CSS
.input-xl, .select-xl, .textarea-xl, .file-input-xl, .input-group-xl {
  --field-h: var(--m-control-h-xl);
  --field-px: 1.125rem;
  --field-fs: var(--m-control-fs-xl);
  --field-radius: var(--m-radius-xl);
}

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.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Input group: start from the base class, then add modifiers -->
<div class="grid gap-3 max-w-sm">
  <div class="input-group">
    <span class="input-group-addon">https://</span>
    <input class="input" placeholder="example.com" aria-label="Domain">
  </div>
  <div class="input-group">
    <input type="number" class="input" value="120" aria-label="Amount">
    <span class="input-group-addon">USD</span>
  </div>
  <div class="input-group input-group-sm">
    <input type="email" class="input" placeholder="Email" aria-label="Email">
    <button type="button" class="input-group-button">Subscribe</button>
  </div>
</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 label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
FormsInputText, email, password, number, search, url and tel inputs with sizes, tones, ghost and filled variants.FormsFile inputA native file input with a styled selector button.FormsColor inputA native color picker shown as a rounded swatch.FormsSwitch groupA list of settings, each with a label, a description and a toggle.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.