Meter New Alpha Light DOM & Tailwind
A graphical display of a numeric value within a known range, such as disk usage, a battery level or a score.
Usage
Meter shows a numeric value within a known range — disk usage, a battery level, a score. Unlike a Progress Bar, it represents a static measurement rather than the completion of a task.
Importing the component registers its custom element:
import "@nordhealth/components/lib/Meter"
Give it a value and an optional label. By default the value is shown as a percentage of the range so the text stays in sync with the indicator fill:
Examples
Basic
A single labelled meter. The value sits between min (default 0) and max (default 100), and the percentage is rendered beside the label.
Levels
Several meters at different fill levels, stacked for comparison.
Without a visible label
Omit label to render just the track. Provide an aria-label so the meter still has an accessible name.
Custom range
Set min and max for a value that isn't a percentage. Here the meter spans 0–5 for a rating.
Custom range with formatting
Pass a format config alongside min/max to display decimal values, such as a rating out of five.
RTL
Meter follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Provide a
label, or anaria-labelwhen the label is hidden, so the meter has an accessible name and its value is announced. - Meter is a non-interactive measurement — use it to report a current reading, not the progress of a task. Reach for Progress Bar when you are showing how far along an operation is.
- The displayed text is kept in sync with the indicator fill, so sighted and assistive-technology users perceive the same value. To format the announced and displayed value (currency, decimals, locale), set the
formatandlocaleproperties in JavaScript.
API reference
Meter
Meter is a graphical display of a numeric value within a known range, such as disk usage, a battery level or a score. Unlike Progress Bar, it represents a static measurement rather than the completion of a task.
<nord-meter></nord-meter>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
value | value | The current value. Must be between min and max. | number | 0 |
min | min | The minimum value. If min is greater than max, the two are swapped so
the range is always well-formed. | number | 0 |
max | max | The maximum value. If min is greater than max, the two are swapped so
the range is always well-formed. | number | 100 |
label | label | A label describing what the meter represents. Shown above the meter and exposed to assistive technology. | string | '' |
locale | locale | The locale used by Intl.NumberFormat when formatting the value.
Defaults to the runtime locale. | string | undefined | — |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-meter-size | Controls the thickness of the meter, using our spacing tokens. | var(--n-space-s) |
--n-meter-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius-s) |
--n-meter-color | Controls the color of the indicator, using color tokens. | var(--n-color-accent) |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use to display a static numeric measurement within a known range, such as disk usage, a battery level or a score.
- Always provide a
labeldescribing what the meter represents. - Use the
minandmaxattributes when the value is not on a 0–100 scale.
Don’t
- Don’t use to show the progress of an ongoing task, see Progress Bar instead.
- Don’t use for values that change continuously to indicate loading, see Spinner instead.