Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - Meter
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
<li><strong>Customizable</strong> – Support for custom value scales, formatting, and styling.</li> </ul> <div class="divider"></div> <h2>Interactive Examples</h2> <h3>Basic Meter with Controls</h3> <div class="example-section"> <div class="controls"> <div class="control-group"> <label for="value-slider">Value:</label> <input type="range" id="value-slider" min="0" max="100" value="25"> <span id="value-display">25</span> </div> <div class="control-group"> <label for="variant-select">Variant:</label> <select id="variant-select"> <option value="">Default</option> <option value="meter-success">Success</option> <option value="meter-warning">Warning</option> <option value="meter-error">Error</option> </select> </div> <div class="control-group"> <label for="size-select">Size:</label> <select id="size-select"> <option value="">Default</option> <option value="meter-small">Small</option> <option value="meter-large">Large</option> </select> </div> </div> <div class="react-aria-Meter" id="interactive-meter"> <label class="react-aria-Label">Storage space</label> <span class="value">25%</span> <div class="bar"> <div class="fill" style="width: 25%"></div> </div> </div> </div> <h3>Custom Value Scale</h3> <div class="example-section"> <div class="react-aria-Meter"> <label class="react-aria-Label">Widgets Used</label> <span class="value">100 of 150</span> <div class="bar"> <div class="fill" style="width: 66.67%"></div> </div> </div> </div> <h3>Currency Formatting</h3> <div class="example-section"> <div class="react-aria-Meter"> <label class="react-aria-Label">Budget Used</label> <span class="value">¥60,000</span> <div class="bar"> <div class="fill" style="width: 60%"></div> </div> </div> </div> <h3>Custom Value Label</h3> <div class="example-section"> <div class="react-aria-Meter"> <label class="react-aria-Label">Space used</label> <span class="value">54 of 60GB</span> <div class="bar"> <div class="fill" style="width: 90%"></div> </div> </div> </div> <div class="divider"></div> <h2>Anatomy</h2> <div class="anatomy-section"> <p>Meters consist of a track element showing the full value in a range, a fill element showing the current value, a label, and an optional value label.</p> <div class="code-block"><div class="react-aria-Meter"> <label class="react-aria-Label">Label</label> <span class="value">Value</span> <div class="bar"> <div class="fill"></div> </div></div> </div> </div> <h2>Styling</h2> <p>React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc.</p> <div class="code-block">.react-aria-Meter { --fill-color: #0066cc; --track-color: #e1e1e1; --text-color: #323232; --border-color: #ccc; display: grid; grid-template-areas: "label value" "bar bar"; grid-template-columns: 1fr auto; gap: 8px; width: 300px; color: var(--text-color);}.bar { grid-area: bar; background: var(--track-color); height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color);}.fill { background: var(--fill-color); height: 100%; transition: width 0.3s ease;} </div> <div class="divider"></div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> </div> <script> // Interactive functionality const valueSlider = document.getElementById("value-slider"); const valueDisplay = document.getElementById("value-display"); const variantSelect = document.getElementById("variant-select"); const sizeSelect = document.getElementById("size-select"); const interactiveMeter = document.getElementById("interactive-meter"); const fill = interactiveMeter.querySelector(".fill"); const valueSpan = interactiveMeter.querySelector(".value"); function updateMeter() { const value = parseInt(valueSlider.value); const variant = variantSelect.value; const size = sizeSelect.value; // Update value display valueDisplay.textContent = value; valueSpan.textContent = value + "%"; // Update fill width fill.style.width = value + "%"; // Update meter classes interactiveMeter.className = "react-aria-Meter"; if (variant) interactiveMeter.classList.add(variant); if (size) interactiveMeter.classList.add(size); } valueSlider.addEventListener("input", updateMeter); variantSelect.addEventListener("change", updateMeter); sizeSelect.addEventListener("change", updateMeter); // Add ARIA attributes for accessibility function addAriaAttributes() { const meters = document.querySelectorAll(".react-aria-Meter"); meters.forEach((meter, index) => { meter.setAttribute("role", "meter"); meter.setAttribute("aria-valuenow", "25"); meter.setAttribute("aria-valuemin", "0"); meter.setAttribute("aria-valuemax", "100"); const label = meter.querySelector(".react-aria-Label"); if (label) { const labelId = "meter-label-" + index; label.id = labelId; meter.setAttribute("aria-labelledby", labelId); } }); } // Initialize addAriaAttributes(); updateMeter(); // Simulate real-time updates for demonstration let demoValue = 25; const basicMeter = document.getElementById("basic-meter"); const basicFill = basicMeter.querySelector(".fill"); const basicValue = basicMeter.querySelector(".value"); setInterval(() => { demoValue += Math.random() * 10 - 5; demoValue = Math.max(0, Math.min(100, demoValue)); basicFill.style.width = demoValue + "%"; basicValue.textContent = Math.round(demoValue) + "%"; basicMeter.setAttribute("aria-valuenow", Math.round(demoValue)); }, 2000); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">