Meter

Meter renders a read-only bounded value with role="meter" and ARIA value metadata. Its slots expose the label, value, track, and indicator.

Use Progress for task completion and Slider for editable values.

Anatomy

• #label: Custom visible label.
• #value: Custom formatted value text.
• #indicator: Custom content inside the filled indicator.

The role="meter" root and track are generated by the component. The root sets --akaza-meter-percentage, and thresholds expose data-akaza-state as low, normal, high, or optimum.

Usage

<script setup lang="ts">
import { Meter } from "akaza-ui";
</script>

<template>
  <Meter label="Storage used" :value="64" />
</template>

Examples

Basic gauge

Use a basic meter for a read-only value inside a known min/max range.

<template>
  <Meter label="Storage used" :value="64" />
</template>

Threshold states

Use low, high, and optimum to expose state for styling.

<template>
  <Meter
    label="Battery"
    :value="18"
    :low="20"
    :high="90"
    :optimum="80"
    :ui="{ indicator: 'data-[akaza-state=low]:bg-red-600' }"
  />
</template>

Formatted value

Use locale and formatOptions for displayed value text.

<template>
  <Meter
    label="Quota"
    :value="0.72"
    :max="1"
    :format-options="{ style: 'percent' }"
  />
</template>

Custom accessible value text

Use getAriaValueText when the numeric value needs a human-readable screen reader label.

<template>
  <Meter
    label="Storage"
    :value="64"
    :get-aria-value-text="(value, max) => `${value} of ${max} gigabytes used`"
  />
</template>

Custom slots

Slots receive value, formatted value, percentage, and state where relevant.

<template>
  <Meter :value="health" label="Health">
    <template #value="{ percentage }">
      {{ Math.round(percentage) }}%
    </template>
  </Meter>
</template>

Region State

Values below low use low; values above high use high; values between the thresholds use normal. When optimum is supplied, the region containing it uses optimum instead. These describe regions, not prescribed success or error colors. Provide finite, ordered bounds and thresholds.

API Reference

Props

UI Options

Slots

Styling Hooks

Meter sets --akaza-meter-percentage on the root. Plain class applies to the root meter.