Meter

Contract

This Tinyrack wrapper preserves Base UI behavior, React 19 refs, native props, events, and the render contract. Values are clamped to min and max before formatting so the visible value, fill, and ARIA value stay synchronized. Playground controls cover bounded ranges, locale-aware number formatting, and every explicit semantic variant; Reset restores the documented defaults.

Install

pnpm add @tinyrack/ui

@import '@tinyrack/ui/components/meter.css';

import { TRMeter } from '@tinyrack/ui/components/meter';

Playground

Usage

Examples

API

• TRMeter.Root requires value, defaults to min={0}, max={100}, and variant="neutral", and forwards native div props, render, and React 19 ref. Out-of-range and NaN values are clamped before formatting.
• TRMeter.Label supplies the accessible name. When no visible label is appropriate, provide aria-label on Root.
• TRMeter.Value displays the locale-aware value. Its render function receives the formatted and numeric values.
• TRMeter.Track contains TRMeter.Indicator; Indicator width represents the normalized position between min and max.
• Use format and locale for visible units, and getAriaValueText when the numeric value needs context for assistive technology. The semantic variants are explicit; Tinyrack does not infer low/high thresholds.