Skip to content
Yuzur1ha Open

Component referenceDraft

Meter

Meter communicates a bounded numeric measurement with a label and an accessible value.

Updated

Design notes

Keep the range meaningful and show enough context to interpret the number. The component normalizes invalid or out-of-range values for rendering.

Playground

Playgrounddemo.tsx
Storage used
Signal quality
Capacity warning

content/components/meter/demo.tsx

import { useState } from "react"
import { Meter, NumberField } from "@yuzur1ha/ui"
export function MeterDemo() {
  const [usage, setUsage] = useState<number | null>(62)
  const boundedUsage = Math.max(0, Math.min(100, usage ?? 0))
  return (
    <>
      <Meter
        label="Storage used"
        value={boundedUsage}
        valueText={`${boundedUsage} of 100 GB`}
      />
      <NumberField
        label="Used storage"
        value={usage}
        onValueChange={setUsage}
        min={0}
        max={100}
        incrementLabel="Increase usage"
        decrementLabel="Decrease usage"
      />
      <Meter label="Signal quality" value={0.65} max={1} valueText="0.65 / 1" />
      <Meter label="Capacity warning" value={92} tone="danger" />
    </>
  )
}

API

Meter

A labelled meter with a bounded visual value. Values must be finite and max must exceed min. Native div attributes and ref apply to the wrapper.

MeterProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
valuenumberYes—Finite measurement. Display and accessibility values are clamped to the configured range.
minnumberNo0Finite lower bound; must be less than max.
maxnumberNo100Finite upper bound; must exceed min.
valueTextstringNo—Custom visible value text and aria-valuetext. Otherwise the visible value is a percentage.
showValuebooleanNotrueShow the value text beside the label; meter semantics remain when hidden.
tone"default" | "danger"No"default"Meter palette: default ink or danger.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.