Meter

Meter represents a bounded scalar measurement, such as storage usage, health, quota, or score.

preview

React
"use client"

import Meter from "@radui/ui/Meter"

export default function MeterExample() {
    return (
        <div style={{ width: "280px" }}>
            <Meter.Root
                aria-label="Storage used"
                value={72}
                minValue={0}
                maxValue={100}
                lowValue={30}
                highValue={85}
                getValueLabel={(value) => `${value}% capacity used`}
            >
                <Meter.Indicator />
            </Meter.Root>
        </div>
    )
}

Features

Uses the meter ARIA role for bounded measurements
Supports min, max, low, high, and optimum thresholds
Exposes data-state and threshold attributes for styling
Supports compound usage with Root and Indicator parts

Accessible name

Give the meter an accessible name with aria-label or aria-labelledby so people can tell what it measures. Use getValueLabel when the value needs a more descriptive announcement.

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Meter from "@radui/ui/Meter"

export default () => (
    <Meter.Root aria-label="Storage used" value={72} minValue={0} maxValue={100} lowValue={30} highValue={85}>
        <Meter.Indicator />
    </Meter.Root>
)

Root

Root component for the Meter primitive.

Prop	Type	Default
value	number	0
minValue	number	0
maxValue	number	100
lowValue	number	--
highValue	number	--
optimumValue	number	--
getValueLabel	(value, minValue, maxValue) => string	--
asChild	boolean	false
customRootClass	string	--

Indicator

Visual fill element for the Meter primitive.

Prop	Type	Default
asChild	boolean	false
className	string	--
style	CSSProperties	--

Edit this page on GitHub →