Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Select (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.

Interactive22 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-select

Options

OptionDescription
data-m-select-search (on by default from 10 options, "false" turns it off)
data-m-select-clearable
data-m-select-placeholder="Pick one" (or an empty first option)
multiple on the select
data-description, data-icon, data-image or data-color on an option
select-xs to select-xl, select-primary, select-ghost and select-filled

Methods

MethodDescription
Monsoon.select(el).open()
Monsoon.select(el).close()
Monsoon.select(el).value
Monsoon.select(el).value = "team"
Monsoon.select(el).refresh() after changing select.value in code

Events

EventDescription
change and input on the native select
monsoon:change { value }

Classes

22 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 (custom). Not used in the example above. Sets block display, width, height, padding, alignment and gap, and --tone and --tone-fg.
CSS
.select-menu[data-multiple] .select-menu-placeholder {
  padding-inline-start: .375rem;
}

.select-menu[data-multiple] .select-menu-value {
  flex-wrap: wrap;
  gap: .25rem;
  white-space: normal;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets flex display, alignment, gap, text style, background and shadow, and --_line and --_line.
CSS
.select-menu-trigger[aria-expanded=true] {
  --_line: var(--tone);
  background-color: var(--surface);
}

.select-menu-trigger {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: start;
  -webkit-user-select: none;
  user-select: none;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets flex display, alignment, gap, width, overflow and text style.
CSS
.select-menu-value > .select-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-menu-value {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets overflow, text style and text color.
CSS
.select-menu-placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted-foreground);
}

.select-menu[data-multiple] .select-menu-placeholder {
  padding-inline-start: .375rem;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets overflow and text style.
CSS
.select-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-menu-value > .select-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets absolute position, offsets, grid display, alignment, width and height.
CSS
.select-menu-clear:hover {
  color: var(--foreground);
  background-color: var(--muted);
}

.select-menu-clear::before {
  content: "";
  width: .75rem;
  height: .75rem;
  background-color: currentColor;
  mask: var(--m-ix-x) center / contain no-repeat;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, padding and text color, and --tone.
CSS
.select-menu-popup[data-above] {
  animation-name: m-ix-pop-up;
}

.select-menu-popup:popover-open {
  display: flex;
  flex-direction: column;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets alignment, height, overflow and border.
CSS
.select-menu-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 18rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: 0;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets flex display, alignment, gap, padding, corner radius and pointer cursor.
CSS
.select-menu-option[aria-selected=true] {
  font-weight: 500;
}

.select-menu-option[aria-selected=true]::after {
  opacity: 1;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets grid display and width.
CSS
.select-menu-text {
  display: grid;
  min-width: 0;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets text size, font weight, text style and text color.
CSS
.select-menu-description {
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets grid display, alignment, width, height, text color and text style.
CSS
.select-menu-icon > svg {
  width: 100%;
  height: 100%;
}

.select-menu-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets alignment, width, height and corner radius.
CSS
.select-menu-image {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--m-radius-full);
  object-fit: cover;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets alignment, width, height, background, corner radius and shadow.
CSS
.select-menu-swatch {
  flex: none;
  width: .875rem;
  height: .875rem;
  background-color: var(--swatch);
  border-radius: var(--m-radius-full);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 15%, transparent);
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets margin, padding and border.
CSS
.select-menu-groupbox + .select-menu-groupbox,
.select-menu-option + .select-menu-groupbox {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: var(--m-border-width) solid var(--border);
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets padding, text size, font weight and text color.
CSS
.select-menu-group {
  padding: .375rem .5rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets padding, text style and text color.
CSS
.select-menu-empty {
  padding: .75rem .5rem;
  text-align: center;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets width.
CSS
.select-menu-chip {
  max-width: 100%;
}
Modifier Modifier, combined with the select-menu class. Not used in the example above. Sets grid display, alignment, width, height, margin and corner radius.
CSS
.select-menu-chip-remove:hover {
  opacity: 1;
  background-color: color-mix(in oklab, currentColor 14%, transparent);
}

.select-menu-chip-remove::before {
  content: "";
  width: .625rem;
  height: .625rem;
  background-color: currentColor;
  mask: var(--m-ix-x) center / contain no-repeat;
}
Part Part of the select (custom). 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));
}
Part Part of the select (custom). Not used in the example above. Sets block display, width, height, padding, text size and text style, and 9 custom properties.
CSS
.input-group > .input, .input-group > .select {
  flex: 1 1 0%;
  width: auto;
}

.input::-webkit-calendar-picker-indicator:hover {
  background: var(--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>

<!-- Select (custom): start from the base class, then add modifiers -->
<div class="grid gap-4 max-w-sm">
  <div class="field">
    <label class="label" for="sm-plan">Plan</label>
    <select id="sm-plan" class="select" name="plan" data-m-select>
      <option value="">Choose a plan</option>
      <option value="hobby" data-description="One project, community support">Hobby</option>
      <option value="team" data-description="Up to 20 seats and shared billing" selected>Team</option>
      <option value="business" data-description="SSO, audit logs and a 99.9% SLA">Business</option>
      <option value="enterprise" data-description="Talk to sales" disabled>Enterprise</option>
    </select>
  </div>
  <select class="select" data-m-select data-m-select-clearable aria-label="Status">
    <option value="">Any status</option>
    <option value="todo" data-color="var(--muted-foreground)">To do</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.
FormsSelectA styled native select with a theme aware chevron, sizes, tones and variants.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.Navigation and overlaysMenuA list of links or actions with titles, icons, shortcuts, an active item, disabled and danger states, nested submenus on <details> and a horizontal layout.

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.