Feedback

Meter

Displays a measurable value within a known range with native meter semantics.

idle

Usage

import {
	Meter,
	MeterIndicator,
	MeterLabel,
	MeterTrack,
	MeterValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Meter>
	<MeterLabel />
	<MeterValue />
	<MeterTrack>
		<MeterIndicator />
	</MeterTrack>
</Meter>

Guidance	Practice
Do	Label the measured quantity and its range. Show units and the exact value when they affect decisions.

Guidance	Boundary
Scope	Use Progress for task completion. Meter represents a measurement within a known range.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Meter.value`	`number`	`Required`	Sets the measured value. Base UI owns its accessible value range.
`Meter.min / Meter.max`	`number`	`Base UI defaults`	Set the lower and upper bounds for the measurement.
`MeterLabel`	`MeterLabelProps`	`Optional`	Names the meter; aria-label or aria-labelledby can also provide its accessible name.
`MeterTrack / MeterIndicator / MeterValue`	`Composable parts`	`Track and indicator by default`	Provide the visual scale and formatted value. The root creates a default track when children are omitted.

Feedback

Displays a measurable value within a known range with native meter semantics.

idle

import {
	Meter,
	MeterIndicator,
	MeterLabel,
	MeterTrack,
	MeterValue,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<Meter>
	<MeterLabel />
	<MeterValue />
	<MeterTrack>
		<MeterIndicator />
	</MeterTrack>
</Meter>

Guidance	Practice
Do	Label the measured quantity and its range. Show units and the exact value when they affect decisions.

Guidance	Boundary
Scope	Use Progress for task completion. Meter represents a measurement within a known range.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`Meter.value`	`number`	`Required`	Sets the measured value. Base UI owns its accessible value range.
`Meter.min / Meter.max`	`number`	`Base UI defaults`	Set the lower and upper bounds for the measurement.
`MeterLabel`	`MeterLabelProps`	`Optional`	Names the meter; aria-label or aria-labelledby can also provide its accessible name.
`MeterTrack / MeterIndicator / MeterValue`	`Composable parts`	`Track and indicator by default`	Provide the visual scale and formatted value. The root creates a default track when children are omitted.