Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Combobox

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

Interactive7 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
data-m-combobox-placeholder
data-m-combobox-empty="No results"
data-m-combobox-async (ask for items with an event)

Methods

MethodDescription
Monsoon.combobox(el).open()
Monsoon.combobox(el).close()
Monsoon.combobox(el).value
Monsoon.combobox(el).refresh()

Events

EventDescription
monsoon:change { value, label }
monsoon:combobox-search { query, set(items) } with data-m-combobox-async

Classes

7 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 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. A hook for state rules such as .combobox > .combobox-input.
CSS
.combobox > .combobox-input {
  padding-inline-end: var(--field-h, var(--m-control-h-md));
}

.combobox-control > .combobox-input, .tags-input-field {
  flex: 1 1 6rem;
  min-width: 6rem;
  height: calc(var(--field-h, var(--m-control-h-md)) - .5rem - 2px);
  padding: 0 .25rem;
  font-size: var(--field-fs, var(--m-control-fs-md));
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets absolute position, offsets, grid display, alignment, width and text color.
CSS
.combobox-toggle::before {
  mask-image: var(--m-ix-down);
}

.datepicker-toggle:hover,
.combobox-toggle:hover,
.datepicker-toggle[aria-expanded=true] {
  color: var(--foreground);
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, padding and overflow, and --tone and --tone-fg.
CSS
.combobox-list {
  max-height: min(18rem, 50vh);
  padding: .25rem;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .datepicker-panel,
  .combobox-list,
  .color-picker-panel,
  .data-table-menu,
  .select-menu-popup,
  .tags-input-tag,
  .carousel-auto .carousel-dot::after {
    animation: none;
  }
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets flex display, alignment, gap, padding, corner radius and pointer cursor.
CSS
.combobox-option[aria-selected=true] {
  font-weight: 500;
}

.combobox-option[aria-selected=true]::after {
  opacity: 1;
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets padding, text size, font weight and text color.
CSS
.combobox-group {
  padding: .5rem .625rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the combobox class. Not used in the example above. Sets padding, text style and text color.
CSS
.combobox-empty {
  padding: .875rem .625rem;
  text-align: center;
  color: var(--muted-foreground);
}

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>

<!-- Combobox: start from the base class, then add modifiers -->
<div class="grid gap-4 max-w-xs">
  <div class="combobox" data-m-combobox>
    <select class="select" aria-label="Time zone">
      <option value="">Pick a time zone</option>
      <optgroup label="Americas">
        <option value="America/Sao_Paulo">São Paulo</option>
        <option value="America/New_York">New York</option>
        <option value="America/Mexico_City">Mexico City</option>
        <option value="America/Vancouver">Vancouver</option>
      </optgroup>
      <optgroup label="Europe">
        <option value="Europe/Lisbon">Lisbon</option>
        <option value="Europe/Berlin">Berlin</option>
        <option value="Europe/Zurich">Zürich</option>
<!-- 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 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.
InteractiveMulti select comboboxOn 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.InteractiveDate pickerA popover calendar over a native date input: month and year menus, a keyboard grid (arrows, Home, End, Page Up and Page Down), min and max, disabled dates, and month names and week start from the locale. Needs monsoon.js.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.