Monsoon v0.2.0
Made by Alexandre Kohler Star

Forms

Select

A styled native select with a theme aware chevron, sizes, tones and variants.

Forms13 classesNo JavaScriptLight and dark

Example

Full

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.

ClassTypeWhat it does
Base Base class of the select. On a <select> in the example. Sets block display, width, height, padding, text size and text style, and 9 custom properties.
CSS
.select:dir(rtl) {
  background-position: left calc(var(--field-px, .75rem) - .125rem) center;
}

.input,
.select,
.textarea,
.file-input,
.color-input,
.otp-input,
.otp-field {
  --tone: var(--field-tone, var(--ring));
}
Modifier Modifier, combined with the select class. Not used in the example above. Sets border.
CSS
.input-bordered, .select-bordered, .textarea-bordered {
  border-style: solid;
  border-width: var(--m-border-width);
}
Modifier Modifier, combined with the select class. Not used in the example above. Sets shadow, and --field-bg, --field-border and --field-bg.
CSS
.input-ghost:hover, .select-ghost:hover, .textarea-ghost:hover {
  --field-bg: var(--muted);
}

.input-ghost, .select-ghost, .textarea-ghost {
  --field-bg: transparent;
  --field-border: transparent;
  box-shadow: none;
}
Modifier Modifier, combined with the select class. On a <select> in the example. Sets shadow, and --field-bg, --field-border and --field-bg.
CSS
.input-filled, .select-filled, .textarea-filled {
  --field-bg: var(--muted);
  --field-border: transparent;
  box-shadow: none;
}

.input-filled:hover, .select-filled:hover, .textarea-filled:hover {
  --field-bg: color-mix(in oklab, var(--muted), var(--foreground) 5%);
}
Tone Primary tone. Not used in the example above. Sets --field-border and --tone.
CSS
.input-primary, .select-primary, .textarea-primary {
  --field-border: var(--primary);
  --tone: var(--primary);
}
Tone Success tone. Not used in the example above. Sets --field-border, --field-tone and --tone.
CSS
.input-success, .select-success, .textarea-success, .field-success {
  --field-border: var(--success);
  --field-tone: var(--success);
  --tone: var(--success);
}
Tone Warning tone. Not used in the example above. Sets --field-border, --field-tone and --tone.
CSS
.input-warning, .select-warning, .textarea-warning, .field-warning {
  --field-border: var(--warning);
  --field-tone: var(--warning);
  --tone: var(--warning);
}
Tone Danger tone. Not used in the example above. Sets --field-border, --field-tone and --tone.
CSS
.input-danger, .select-danger, .textarea-danger, .field-danger {
  --field-border: var(--danger);
  --field-tone: var(--danger);
  --tone: var(--danger);
}
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 <select> 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">

<!-- Select: start from the base class, then add modifiers -->
<div class="grid gap-3 max-w-sm">
  <select class="select" aria-label="Country">
    <option>Brazil</option>
    <option>Canada</option>
    <option>Japan</option>
  </select>
  <select class="select select-sm select-filled" aria-label="Sort by">
    <option>Newest first</option>
    <option>Oldest first</option>
  </select>
</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.
  • 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.
FormsMultiple selectWith multiple or size the select becomes a list box without the chevron.FormsCustom selectAdd select-custom to opt in to the customizable select (appearance: base-select) with a styled picker where supported; other browsers keep the native select.InteractiveSelect (custom)A fully custom select over a native one, which stays in the form with its value and change events in sync. Options can carry an icon, an image, a color or a description, optgroups become headings, long lists get a search box, multiple shows chips, and it can be clearable. Keyboard and screen readers follow the WAI-ARIA select only combobox pattern, and the size, tone and variant classes of .select carry over. Needs monsoon.js.FormsDate and timeThe .input class styles date, time and datetime pickers, with a picker icon that follows the theme.

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.