Meter
v0.0.10
mix mishka.ui.gen.headless meter
Overview of the Phoenix and LiveView Headless Meter Component
The Mishka Chelekom Headless Meter ships zero opinionated styling - only the semantic markup and full WAI-ARIA wiring for a scalar gauge that represents a known value within a defined range (for example disk usage or battery level), distinct from a progress bar which tracks task completion. The root carries role="meter" with aria-valuemin, aria-valuemax, aria-valuenow (clamped into the range) and aria-valuetext (a human-readable readout). Every part - label, value, track and indicator - is addressable through a *_class attribute, and the indicator exposes the fill ratio via the --chelekom-meter CSS custom property, so you style the gauge entirely with your own Tailwind classes.
Base UI Meter example (Phoenix headless)
Base UI Meter example (Phoenix headless)
<.meter
id="baseui-meter-hero"
value={24}
label="Storage Used"
show_value
class="grid max-w-full w-60 grid-cols-2 gap-y-2"
label_class="text-sm font-normal text-neutral-950 dark:text-white"
value_class="text-right text-sm text-neutral-950 dark:text-white"
track_class="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800"
indicator_class="bg-neutral-950 transition-[width] duration-500 dark:bg-white"
/>Parts & data attributes
Each part carries a stable data-part and a structural chelekom-meter__* class you can target, plus the indicator's fill ratio is exposed as a CSS custom property.
| Part | data-part | State / ARIA | Purpose |
|---|---|---|---|
| Root | - | role="meter", aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext, aria-labelledby | The gauge container; carries all ARIA value state. |
| Label | label | id referenced by aria-labelledby | The accessible name for the meter, rendered when label is set. |
| Value | value | - | Optional text readout (e.g. "24%"), rendered when show_value is set. |
| Track | track | - | The background bar the indicator fills. |
| Indicator | indicator | --chelekom-meter CSS custom property | The filled portion; width driven by the value/min/max ratio. |
Accessibility
Follows the WAI-ARIA Meter pattern: the root exposes role="meter" with the current value, range, and a human-readable aria-valuetext, so assistive technology announces a meaningful readout instead of a raw number. This component ships no JavaScript - it is a purely declarative, server-rendered gauge.
Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | Unique id (anchors aria relationships) |
value
|
integer
| — | — | Yes | Current value (clamped into [min, max]) |
min
|
integer
|
0
| — | No | Lower bound of the range |
max
|
integer
|
100
| — | No | Upper bound of the range |
label
|
string
| — | — | No | Accessible label (wired to aria-labelledby) |
value_text
|
string
| — | — | No | — |
show_value
|
boolean
|
false
| — | No | — |
class
|
any
| — | — | No | Extra classes for the root |
label_class
|
any
| — | — | No | — |
value_class
|
any
| — | — | No | — |
track_class
|
any
| — | — | No | — |
indicator_class
|
any
| — | — | No | — |
rest
|
global
| — | — | No | — |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--type
|
meter
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.headless meter