Ask Claude CodeAsk Codex

Meter

How much of something on a fixed scale, such as password strength. Not a loading or step indicator: for loading, use a Spinner.

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Meter } from "@harmo-ui/react";

<Meter
  value={1}
  max={3}
  status="error"
  aria-label="Password strength"
  aria-valuetext="Too weak"
/>

Examples

This site is using your theme

Password strength

Too weak, medium, and strong. data-filled fills a segment and data-status colors the filled ones; without it they are gray. role="meter" and its aria-value* attributes give screen readers the value, such as "Password strength, Medium".

<>
  <Meter
    value={1}
    max={3}
    status="error"
    aria-label="Password strength"
    aria-valuetext="Too weak"
  />
  <Meter
    value={2}
    max={3}
    aria-label="Password strength"
    aria-valuetext="Medium"
  />
  <Meter
    value={3}
    max={3}
    status="success"
    aria-label="Password strength"
    aria-valuetext="Strong"
  />
</>

Other scales

Use as many segments as the scale has steps. warning and info color the fill too.

<>
  <Meter
    value={3}
    max={5}
    status="info"
    aria-label="Profile completeness"
    aria-valuetext="3 of 5 steps"
  />
  <Meter
    value={1}
    max={4}
    status="warning"
    aria-label="Message quality"
    aria-valuetext="Low"
  />
</>

API reference

React

<Meter> renders the meter, one segment per step, and sets role and the aria-value* attributes from its value. Name it with aria-label, and put the value in words with aria-valuetext. Other props are the <div>'s attributes.

PropEffect
valueHow many segments are filled
maxHow many segments there are
statussuccess, warning, info, or error; gray when left out

HTML

A <div class="hmeter" role="meter"> with one .hmeter-segment per step of the scale, and aria-label, aria-valuemin, aria-valuemax, and aria-valuenow; aria-valuetext when the number alone means little. The meter is only the bar: words such as "Too weak", hints, and when to show it belong to the component using it, such as Password input. Load meter.css.

HookEffect
data-filled on a segmentFilled
(no data-status)Filled segments in --harmo-color-text-tertiary (gray)
data-status="success"Filled segments in --harmo-status-color-success (green)
data-status="warning"Filled segments in --harmo-status-color-warning (amber)
data-status="info"Filled segments in --harmo-status-color-info (cyan)
data-status="error"Filled segments in --harmo-status-color-error (red)
hiddenHides the meter, for example until a password has been typed

It needs a script to change the value. See Meter's full contract.

Accessibility

role="meter" and its aria-value* attributes give screen readers the value, for example "Password strength, Medium".