Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Meter

Meter is a visual representation of a numerical value within a known range.

Version 1.0.3
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/core - or - yarn add @twilio-paste/meter

Usage

Usage page anchor
import {Meter, MeterLabel} from '@twilio-paste/core/meter';
import {HelpText} from '@twilio-paste/core/help-text'
import {useUID} from '@twilio-paste/core/uid-library'

const Component = () => {
  const meterId = useUID();
  const helpTextId = useUID(); // Help text is optional

  return (
    <>
      <MeterLabel htmlFor={meterId} valueLabel="50%">Label</Label>
      <Meter id={meterId} value={50} aria-describedby={helpTextId} />
      <HelpText id={helpTextId}>Help text</HelpText>
    </>
  );
};

Props

Props page anchor

Meter

Meter page anchor

id RequiredRequired

ID to match with the label.

Type
string

aria-describedby

Optional ID to pair the Meter to its help text.

Type
string

aria-label

Label text of the Meter (if not using a regular MeterLabel with htmlFor or aria-labelledby).

Type
string

aria-labelledby

Optional ID to pair the Meter to its label text (if not using a regular MeterLabel with htmlFor).

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'METER'

maxLabel

Label displayed for max value. Only shown when this prop is passed.

Type
string

maxValue

Maximum value of the Meter.

Type
number
Default
100

minLabel

Label displayed for min value. Only shown when this prop is passed.

Type
string

minValue

Minimum value of the Meter.

Type
number
Default
0

value

The current value.

Type
number

MeterLabel

MeterLabel page anchor

htmlFor RequiredRequired

Pass the id of the associated Meter.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'METER_LABEL'

valueLabel

Custom value label of the Meter.

Type
string