A value label and proportional visual track. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
meter,meter-header,meter-value,meter-track,meter-indicator
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<div class="meter">
<div class="meter-header"><span>Storage used</span><span class="meter-value">40%</span></div>
<div class="meter-track" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
<span class="meter-indicator" style="width:40%"></span>
</div>
</div>Variants and composition
meter-track contains meter-indicator; its width represents the measured value. meter-header and meter-value present the same value in text.
Behavior and accessibility
Communicate the numeric value in text or meter semantics as well as the fill. The preset does not calculate percentages or choose a color.
Reference
See the interactive Storybook specimen. Continue to Mockup or return to the Official preset overview.