Meter
A high-quality, unstyled React meter component that provides a graphical display of a numeric value.
A graphical display of a numeric value within a range.
Storage Used
Anatomy
Import the component and assemble its parts:
import { Meter } from '@base-ui/react/meter';
<Meter.Root>
<Meter.Label />
<Meter.Track>
<Meter.Indicator />
</Meter.Track>
<Meter.Value />
</Meter.Root>;API reference
Root
| Name | Type | Default | Description |
|---|---|---|---|
formatOptional | Intl.NumberFormatOptions | undefined | — | Options to format the value. |
getAriaValueTextOptional | ((formattedValue: string, value: number) => string) | undefined | — | A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter. |
localeOptional | Intl.LocalesArgument | undefined | — | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
maxOptional | number | undefined | 100 | The maximum value |
minOptional | number | undefined | 0 | The minimum value |
valueRequired | number | — | The current value. |
Value
| Name | Type | Default | Description |
|---|---|---|---|
childrenOptional | null | ((formattedValue: string, value: number) => React.ReactNode) | undefined | — | — |