Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Multi select combobox

On a select with multiple the combobox shows the picks as chips. Backspace in the empty field removes the last one and the listbox stays open while you pick. Needs monsoon.js.

Interactive6 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-combobox

Options

OptionDescription
multiple on the select

Methods

MethodDescription
Monsoon.combobox(el).value (an array)
Monsoon.combobox(el).value = ["design"]

Events

EventDescription
monsoon:change { value: [...] }
change on the native select

Classes

6 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 multi select combobox. On a <div> in the example. Sets block display, width, padding and transform.
CSS
.combobox {
  position: relative;
  display: block;
  width: 100%;
}

.combobox:has([aria-expanded=true]) > .combobox-toggle::before {
  rotate: 180deg;
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets flex display, alignment, gap, height, padding and text cursor, and --_line.
CSS
.combobox-control:read-only:not(:disabled) {
  background-color: var(--field-bg, var(--surface));
  box-shadow: 0 1px 2px var(--_shadow);
}

.combobox-control:focus-within {
  --_line: var(--tone);
  outline: var(--m-ring);
  outline-color: var(--tone);
  outline-offset: var(--m-ring-offset);
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets contents display.
CSS
.combobox-chips {
  display: contents;
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets width.
CSS
.combobox-chip {
  max-width: 100%;
}
Part Part of the multi select combobox. Not used in the example above. Sets absolute position, width, height, margin, opacity and native control styling, and 15 custom properties.
CSS
.chip:has(> input:checked) {
  --chip-bg: var(--tone);
  --chip-border: var(--tone);
  --chip-fg: var(--tone-fg);
}

.chip:where(a, button, label):hover {
  --chip-bg: color-mix(in oklab, var(--tone-tint) 12%, var(--surface));
  cursor: pointer;
}
Part Part of the multi select combobox. Not used in the example above. Sets inline-grid display, alignment, width, height, margin and corner radius.
CSS
.chip-remove:hover {
  opacity: 1;
  background-color: color-mix(in oklab, currentColor 14%, transparent);
}

.chip-remove:focus-visible {
  opacity: 1;
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Multi select combobox: start from the base class, then add modifiers -->
<div class="combobox max-w-sm" data-m-combobox data-m-combobox-placeholder="Add a skill">
  <select class="select" multiple aria-label="Skills">
    <option value="design" selected>Design</option>
    <option value="research">User research</option>
    <option value="frontend" selected>Frontend</option>
    <option value="backend">Backend</option>
    <option value="devops">DevOps</option>
    <option value="writing">Technical writing</option>
    <option value="data">Data analysis</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.
InteractiveComboboxFilter as you type over a native select or an input with a datalist, following the WAI-ARIA combobox pattern. Matches are highlighted, accents are ignored and option groups are kept. Needs monsoon.js.FormsMultiple selectWith multiple or size the select becomes a list box without the chevron.InteractiveDate range pickerTwo date inputs in one .datepicker pick a range: the first click sets the start, the second the end, with the days between highlighted and presets such as Last 7 days. Needs monsoon.js.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.

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.