useMeter

Provides the accessibility implementation for a meter component. Meters represent a quantity within a known range, or a fractional value.

Storage space25%

Example

Meter.tsx

Meter.css

Form.css

Example

Meter.tsx

Meter.css

Form.css

import {Meter} from './Meter';

<Meter label="Storage space" value={25} />

API

<Meter>
  <Label />
</Meter>

useMeter(props: AriaMeterProps): MeterAria

Name	Type	Default
`value`	`number`	Default: `0`
The current value (controlled).
`valueLabel`	`ReactNode`	Default: —
The content to display as the value's label (e.g. 1 of 4).

`formatOptions`	`Intl.NumberFormatOptions`	Default: `{ style: 'percent' }`
The display format of the value label.

Name	Type
`meterProps`	`DOMAttributes`
Props for the meter container element.
`labelProps`	`DOMAttributes`
Props for the meter's visual label (if any).