Segmented meter

A labeled native meter with a discrete visual scale for quantities such as storage usage or capacity.

New

Collection capacity

Reference storage62%

62%

Near the preferred range. Capacity used in this collection.

Storage used62%

Implementation

1import { useId, type CSSProperties, type MeterHTMLAttributes } from "react";2 3export type SegmentedMeterProps = Omit<4  MeterHTMLAttributes<HTMLMeterElement>,5  "value" | "min" | "max" | "low" | "high" | "optimum" | "children"6> & {7  label: string;8  value: number;9  description?: string;10  min?: number;11  max?: number;12  low?: number;13  high?: number;14  optimum?: number;15  segments?: number;16  formatValue?: (value: number) => string;17};18 19/** A bounded measurement backed by a native meter, with readable threshold feedback. */20export function SegmentedMeter({21  label,22  value,23  description,24  min = 0,25  max = 100,26  low,27  high,28  optimum,