Meter

Implemented Display

Progress bar showing a measured value within a known range.

Kumo reference: kumo-ui.com/components/meter/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Storage used

Storage used 65%

Show template

{% load wdj %}
<div class="grid w-full gap-4">
{% include "wdj/components/meter.html" with label="Storage used" value=65 only %}
</div>

Custom value

API requests 750 / 1,000

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/meter.html" with label="API requests" value=75 custom_value="750 / 1,000" only %}
</div>

Hidden value

Progress

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/meter.html" with label="Progress" value=40 show_value=False only %}
</div>

Quota reached

Quota reached 100%

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/meter.html" with label="Quota reached" value=100 variant="danger" only %}
</div>

Empty

Storage 0%

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/meter.html" with label="Storage" value=0 only %}
</div>

Warning

Storage 85%

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/meter.html" with label="Storage" value=85 variant="warning" only %}
</div>

API Reference

Prop	Type	Default	Description
value	number	unset	Value; pass the documented value shown in the examples.
min	number	0 (Slider/Meter)	Min; pass the documented value shown in the examples.
max	number	100 (Slider/Meter)	Max; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
show_value	bool	True	Show value; pass the documented value shown in the examples.
custom_value	string	unset	Custom value; pass the documented value shown in the examples.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract