Meter

Synonyms: Meter value display, Gauge, Measuring device

Description: The Meter component visualizes a numeric measured value within a defined range. It supports classification of that value using optional thresholds and an optimum value.

Example

The example shows a meter with a defined value range, thresholds and a unit.

<KolMeter _high={80} _label="Load" _low={30} _max={100} _min={0} _optimum={70} _unit="%" _value={65} />

Accessibility

• Label required: Each meter component needs _label so the value can be correctly identified.
• Semantic output: A semantic <meter> element provides the value information for assistive technologies.
• Value updates: Changes in value can be detected and announced by assistive technologies.
• Non-interactive: The component is for display purposes and has no own input interaction.

Links and references

Usage

Best Practices / Recommendations

• Use a precise _label that clearly describes the measurement context (e.g. load, level, temperature).
• Set _min and _max according to the domain so users can interpret the value correctly.
• Use _low, _high and _optimum to classify the value into meaningful ranges.
• Provide a clear _unit if the value would be ambiguous without it.
• Use Meter for status and measurement displays. Use an input component for editable values.

Use cases

• System load (e.g. CPU, RAM, storage)
• Battery level or fill level
• Measured values with threshold ranges (e.g. temperature, humidity)
• Quality or health indicators with an optimum range

Construction / Technical

Playground

<KolMeter _label="Auslastung" _max={100} _min={0} _value={50} />

Functionalities (with code)

Basic meter with value range

Simple meter display with minimum, maximum, current value and unit.

<KolMeter _label="Storage load" _max={1024} _min={0} _unit="MB" _value={512} />

Meter with threshold ranges

_low, _high and _optimum can be used to classify value ranges semantically.

• _min to _low: low range
• _low to _high: medium range
• _high to _max: high range
• _optimum defines the preferred target range

<KolMeter _high={70} _label="CPU load" _low={20} _max={100} _min={0} _optimum={10} _value={15} />

Vertical meter

The orientation can be switched between horizontal and vertical using _orientation.

<KolMeter _label="Liquid level" _max={1000} _min={0} _orientation="vertical" _unit="l" _value={650} />

API

Properties

Property	Attribute	Description	Type	Default
_high	_high	Defines the upper boundary of the high range.	number | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_low	_low	Defines the lower boundary of the low range.	number | undefined	undefined
_max (required)	_max	Defines the maximum value of the element.	number	undefined
_min	_min	Defines the minimum value of the element.	number | undefined	undefined
_optimum	_optimum	Defines the optimal value of the element.	number | undefined	undefined
_orientation	_orientation	Defines whether the meter bar is displayed horizontally or vertically.	"horizontal" | "vertical"	'horizontal'
_unit	_unit	Defines the unit of the step values (not shown).	string	'%'
_value (required)	_value	Defines the value of the element.	number	undefined

---