JollyUI
  1. Docs
  2. components
  3. Meter

Meter

A meter represents a quantity within a known range, or a fractional value.

Meters are similar to progress bars, but represent a quantity as opposed to progress over time. See Progress for more details about progress bars.

Installation

npx @sly-cli/sly add jolly-ui meter

Note: Only the default style can be installed via CLI at the moment

Usage

Basic

Value Label

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

For more options see react aria components docs.

Storage space13%