Preview
Basic usage
Structure
Examples
The Preview above is the canonical meter example. Compose it with the public parts shown in Structure.
Context budget
The caller owns the token math and passes finite usage and limit values to Meter. The control demonstrates the warning threshold and the full boundary.
Monthly budget surface
Meter.Background fills a caller-owned surface. It reports capacity usage but does not own a budget rule or threshold tone; the caller owns the copy, card composition, and any warning treatment.
API reference
For inherited behavior and additional part properties, see the Base UI Meter API.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | ((state: MeterRootState) => string) | CSS class applied to the element, or a function that returns a class based on the component's state. | |
style | CSSProperties | ((state: MeterRootState) => React.CSSProperties) | Style applied to the element, or a function that returns a style object based on the component's state. | |
valuerequired | number | The measured scalar. | |
aria-valuetext | string | A caller-owned human-readable description. It may preserve an overflow value while `aria-valuenow` remains clamped. | |
render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, MeterRootState> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. | |
max | number | 100 | The positive capacity or upper bound. |
min | number | 0 | The lower bound. |
locale | Intl.LocalesArgument | The locale used by `Intl.NumberFormat` when formatting the value. | |
format | Intl.NumberFormatOptions | Options used to format the displayed value. | |
getAriaValueText | ((formattedValue: string, value: number) => string) | Returns caller-owned accessible value text. |
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | 0 | Measured usage. The fill and `aria-valuenow` clamp to the positive max. |
max | number | undefined | 100 | Positive capacity. Defaults to 100 when omitted. NaN or non-positive targets are announced as unavailable. |
label | string | undefined | Meter | Accessible name for the capacity surface. |
aria-valuetext | string | undefined | Caller-owned accessible copy, including an overflow amount when needed. | |
children | React.ReactNode | Caller-owned content, such as a LayerCard composition. |
Accessibility
Name the measured capacity with Meter.Label or aria-label. A meter reports a value within a range. It does not announce task completion. Meter.Background announces an unavailable target when no positive capacity exists. Use aria-valuetext for units or an overflow amount.
Installation
Install the component and its declared source dependencies. The command follows this page's registry origin and your configured aliases.