Meter

#Example

<div class="space-y-3">
  <meter class="meter" min="0" max="100" low="30" high="80" optimum="100" value="88">88</meter>
  <meter class="meter meter-lg" min="0" max="100" low="30" high="80" optimum="100" value="55">55</meter>
  <meter class="meter meter-sm" min="0" max="100" low="30" high="80" optimum="100" value="18">18</meter>
</div>

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

.meter::-webkit-meter-inner-element {
  display: block;
  height: 100%;
}

.meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--warning);
}

.meter-xs {
  --meter-h: 0.25rem;
}

.meter-sm {
  --meter-h: 0.375rem;
}

.meter-md {
  --meter-h: 0.5rem;
}

.meter-lg {
  --meter-h: 0.75rem;
}

.meter-xl {
  --meter-h: 1rem;
}

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Meter: start from the base class, then add modifiers -->
<div class="space-y-3">
  <meter class="meter" min="0" max="100" low="30" high="80" optimum="100" value="88">88</meter>
  <meter class="meter meter-lg" min="0" max="100" low="30" high="80" optimum="100" value="55">55</meter>
  <meter class="meter meter-sm" min="0" max="100" low="30" high="80" optimum="100" value="18">18</meter>
</div>

#Accessibility

• Uses the native progress or meter element, which exposes its value to assistive technology. Add a visible label or aria-label.
• 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