Meter

A value in a known range, such as path strength or outreach by method (role="meter"). Name it with label or aria-label.

Kumo source

Runs passed

Lots tested

import { Meter } from "@etched/reticle/meter";

export function Preview() {
  return (
    <div className="grid" style={{ inlineSize: "16rem" }}>
      <Meter label="Runs passed" value={65} />
      <Meter label="Lots tested" value={750} max={1000} customValue="750 / 1,000" />
    </div>
  );
}

Installation

import { Meter, Progress } from "@etched/reticle/meter";

Examples

Label and value

The label names the meter; the value is a percentage of max by default.

Runs passed

Chips binned

Wafer quota

import { Meter } from "@etched/reticle/meter";

export function LabelAndValue() {
  return (
    <div className="grid">
      <Meter label="Runs passed" value={65} />
      <Meter label="Chips binned" value={15} />
      <Meter label="Wafer quota" value={100} />
    </div>
  );
}

Custom value

customValue replaces the percentage, on screen and for screen readers. Orbit's outreach bars show the count, against the largest one.

LinkedIn InMail

Referral

No activation

import { Meter } from "@etched/reticle/meter";

// Orbit's role summary: outreach by method, each bar against the largest count.
const outreach: [string, number][] = [
  ["LinkedIn InMail", 18],
  ["Email", 11],
  ["Referral", 6],
  ["No activation", 2],
];

export function CustomValue() {
  const max = Math.max(...outreach.map(([, count]) => count));

  return (
    <div className="grid">
      {outreach.map(([method, count]) => (
        <Meter key={method} label={method} value={count} max={max} customValue={String(count)} />
      ))}
    </div>
  );
}

Hidden value

showValue={false} shows the label and the bar only.

Lots tested

import { Meter } from "@etched/reticle/meter";

export function HiddenValue() {
  return (
    <div className="grid">
      <Meter label="Lots tested" value={40} showValue={false} />
    </div>
  );
}

Compact, in a table cell

Without a label the meter is one row, a thinner bar and its value. Name it with aria-label.

Employee	Path strength
Sam Lee	x
Kai Ito	x
Ana Ruiz	x

import { Table } from "@etched/reticle/table";
import { Meter } from "@etched/reticle/meter";

// Orbit's warm paths: the strength of each employee's path to the candidate.
const paths: [string, number][] = [
  ["Sam Lee", 42],
  ["Kai Ito", 17],
  ["Ana Ruiz", 4],
];

export function CompactInATableCell() {
  return (
    <div className="card">
      <Table aria-label="Warm paths">
        <thead>
          <tr>
            <th>Employee</th>
            <th style={{ inlineSize: "40%" }}>Path strength</th>
          </tr>
        </thead>
        <tbody>
          {paths.map(([name, strength]) => (
            <tr key={name}>
              <th scope="row">{name}</th>
              <td>
                <Meter aria-label="Path strength" value={strength} />
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

Progress

Progress is the same bar for a task that moves forward (role="progressbar"), such as a wizard. Here customValue gives screen readers the step.

Résumés uploaded

import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Progress } from "@etched/reticle/meter";

export function WizardProgress() {
  const [step, setStep] = useState(2);

  const total = 4;

  return (
    <div className="grid">
      <Progress aria-label="Referral progress" value={step} max={total} customValue={`Step ${step} of ${total}`} showValue={false} />
      <Progress label="Résumés uploaded" value={3} max={8} customValue="3 of 8" />
      <div className="row">
        <Button disabled={step === 1} onClick={() => setStep(step - 1)}>
          Back
        </Button>
        <Button variant="primary" disabled={step === total} onClick={() => setStep(step + 1)}>
          Next
        </Button>
      </div>
    </div>
  );
}

API reference

Meter

Prop	Type	Default	Description
value *	number	–	The value, from `min` (default 0) to `max` (default 100).
customValue	string	–	Text in place of the percentage, for example "750 / 1,000". Screen readers read it as the value.
showValue	boolean	true	Shows the value: after the label, or after the bar when there is no label.
className	string	–	Class on the root, for layout such as width.
label	string \| undefined	–	Text above the bar, with the value at its end.
aria-label	string	–	Names a bar without a label, for example "Path strength".
aria-labelledby	string	–	The id of an element that names a bar without a label, such as the wizard's heading.

Progress

Prop	Type	Default	Description
value *	number	–	The value, from `min` (default 0) to `max` (default 100).
customValue	string	–	Text in place of the percentage, for example "750 / 1,000". Screen readers read it as the value.
showValue	boolean	true	Shows the value: after the label, or after the bar when there is no label.
className	string	–	Class on the root, for layout such as width.
label	string \| undefined	–	Text above the bar, with the value at its end.
aria-label	string	–	Names a bar without a label, for example "Path strength".
aria-labelledby	string	–	The id of an element that names a bar without a label, such as the wizard's heading.