Rating input

#Example

<div class="grid gap-3">
  <div class="rating-input" data-m-rating-input>
    <input type="number" class="input max-w-24" name="score" min="0" max="5" step="0.5" value="3.5" aria-label="Your rating">
  </div>
  <div class="rating-input" data-m-rating-input>
    <input type="number" class="input max-w-24" min="0" max="10" step="1" value="7" aria-label="Score out of 10">
  </div>
</div>

#JavaScript API

#Classes

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

.rating-input {
  --tone: var(--warning);
  --_size: calc(var(--choice-size, 1.125rem) * 1.5);
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  vertical-align: middle;
}

.rating-input-stars:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

.rating-input-stars[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--m-disabled-opacity);
}

.rating-input-star:hover {
  scale: 1.12;
}

@media (forced-colors: active) {
  .rating-input-star {
    forced-color-adjust: none;
  }
}

.rating-input-value {
  min-width: 1.75rem;
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: 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.

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

<!-- Rating input: start from the base class, then add modifiers -->
<div class="grid gap-3">
  <div class="rating-input" data-m-rating-input>
    <input type="number" class="input max-w-24" name="score" min="0" max="5" step="0.5" value="3.5" aria-label="Your rating">
  </div>
  <div class="rating-input" data-m-rating-input>
    <input type="number" class="input max-w-24" min="0" max="10" step="1" value="7" aria-label="Score out of 10">
  </div>
</div>

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

#Related components