Meter
Meter displays a read-only value inside a known range. Use it for gauges like storage usage, quota, battery level, or health scores. It renders role="meter" with value ARIA metadata and exposes label, value, track, and indicator parts.
Use Meter for known bounded values. Use Progress for task completion, and Slider when the user can change the value.
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
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>
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | required | Current value. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
low | number | — | Low threshold. Values below set data-akaza-state="low". |
high | number | — | High threshold. Values above set data-akaza-state="high". |
optimum | number | — | Preferred range hint. |
label | string | — | Visible label. Also labels the meter. |
ariaLabel | string | — | Accessible label when no visible label exists. |
ariaLabelledby | string | label id | Accessible label id. |
ariaValueText | string | — | Custom aria-valuetext. |
locale | Intl.LocalesArgument | runtime locale | Locale for formatted value. |
formatOptions | Intl.NumberFormatOptions | — | Number formatting options. |
getAriaValueText | (value, max, min) => string | undefined | — | Base-style function for aria-valuetext. |
getValueLabel | (formattedValue, value) => string | undefined | — | Function for aria-valuetext. |
ui | MeterUi | — | Classes for structural parts. |
UI Options
| Key | Description |
|---|---|
root | Root meter element. |
label | Label text. |
value | Formatted value text. |
track | Meter track. |
indicator | Filled indicator. |
Slots
| Slot | Props | Description |
|---|---|---|
label | value, formattedValue, state | Custom label. |
value | value, formattedValue, percentage, state | Custom formatted value. |
indicator | value, percentage, state | Custom indicator content. |
Styling Hooks
| UI key | CSS class | Data attrs |
|---|---|---|
root | akaza-meter | data-akaza-state |
label | akaza-meter-label | — |
value | akaza-meter-value | — |
track | akaza-meter-track | — |
indicator | akaza-meter-indicator | data-akaza-state |
Meter sets --akaza-meter-percentage on the root. Plain class applies to the root meter.