Meter
Meters visually represent a quantity or achievement, displaying progress on a bar with a label.
Example
Value
The value prop controls the meter and represents the current percentage of progress. By default, the minimum and maximum values are 0 and 100 but a different scale can be used by setting the min_value and max_value props.
Formatting
The format_options prop dictates how the value is displayed and which characters can be inputted. This parameter supports three styles: Percentage, Currency, and Units.
Note: This prop is compatible with the option parameter of Intl.NumberFormat.
Labeling
When a label is provided, value labels are positioned above the meter by default. The label_position prop can change where these labels are placed, while the show_value_prop can hide them entirely.
The value_label prop can update the value label directly where showing a different scale makes sense.
Size
The size prop controls how thick the meter bar is displayed.
Variants
The variant prop changes the meter’s visual style. It supports four options: informative, positive, critical, and warning.
API Reference
Meters visually represent a quantity or achievement, displaying progress on a bar with a label.
Returns: Element The rendered meter element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| variant | Literal['informative', 'positive', 'critical', 'warning'] | 'informative' | The visual style of the meter. |
| size | Literal['S', 'L'] | 'L' | How thick the bar should be. |
| label_position | Literal['top', 'side'] | 'top' | The position of the label relative to the input. |
| show_value_label | bool | None | None | Whether to show the value label. |
| label | Any | None | None | The label for the input. |
| format_options | NumberFormatOptions | None | None | Options for formatting the displayed value, which also restricts input characters. |
| value_label | Any | None | None | The label for the value (e.g. 1 of 4). |
| value | float | 0 | The current value of the input |
| min_value | float | 0 | The minimum value of the input |
| max_value | float | 100 | The maximum value of the input |
| key | str | None | None | A unique identifier used by React to render elements in a list. |