LinearGauge

Examples

Assessed72 / 86

Complete45%

Criteria86 / 86

import { LinearGauge } from '@eekodigital/raster';

<LinearGauge value={72} max={86} label="Assessed" />
<LinearGauge value={45} max={100} label="Complete" color="var(--demo-warn)" formatLabel={(v) => `${v}%`} />
<LinearGauge value={86} max={86} label="Criteria" color="var(--demo-good)" />

Accessibility

• role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from format.
• Named by the visible label through aria-labelledby.
• Fills its container’s width; the grow animation stops under prefers-reduced-motion.

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
value	number	—	Required.
min	number	0	Start of the range.
max	number	—	Required. End of the range.
label	string	—	Required. Visible label and accessible name.
format	(value: number) => string	Intl.NumberFormat(“en”)	Formats the value and aria-valuetext.
formatLabel	(value, max) => string	—	Visible value text (default {value} / {max}).
height	number	8	Track height in px.
color	string	series 1	Fill colour.
className	string	—