Meter

Synonyms: Gauge, Meter value, Measuring device

The Meter component visualizes a measured value within a defined value range. It graphically displays how a measured value is positioned in relation to its limits and can optionally display different states (optimal, suboptimal, critical).

Example

Meter component with measured value display and status indicator:

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

Accessibility

The Meter component was developed with a focus on accessibility:

• Label requirement: Every meter component must have a visible label via the _label attribute, which is recognized by screen readers.
• Semantic output: A hidden <meter> HTML element with complete attributes ensures that assistive technologies can also understand the measured value.
• Live value announcement: Screen readers are informed when the measured value changes (e.g., "Load – critical").
• Status indication: Automatic status message (optimum, suboptimal, critical) is communicated by assistive technologies.
• Keyboard access: The component does not provide interactive elements as it is only data display.

Links and references

Best Practices / Recommendations

• Meaningful label: Use clear, understandable labels (e.g., "Load", "Memory", "Battery Level").
• Set meaningful boundaries: Define _min, _max, and _optimum correctly to produce meaningful displays.
• Use states: Use the _low, _high, and _optimum attributes to mark ranges – this helps users quickly recognize critical states.
• Clear unit: Set _unit to a clear unit of measurement (e.g., %, GB, °C) to avoid misunderstandings.
• Provide context: Optionally supplement the meter component with additional text that explains the current value or temporal trends.
• Choose the right orientation: Use _orientation="vertical" only when horizontal space is limited; horizontal is the standard display.

Use cases

• System load: Displaying CPU, RAM, or storage load.
• Battery level: Visualizing the battery status of devices.
• Room climate: Display of temperature, humidity, or air quality.
• Progress with limits: Visualization of a value approaching a critical limit (e.g., inventory levels).
• Quality indicators: Graphical display of rating metrics with defined boundaries.

Construction / Technical

Playground

Test the various properties of the meter component:

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

Functionalities

Basic meter with value range

Simple meter component with minimum, maximum and current value:

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

States with critical boundaries

Meter component with defined ranges (low, optimum, high) for status display:

<KolMeter _high={80} _label="CPU load" _low={20} _max={100} _min={0} _optimum={60} _unit="%" _value={45} />

Vertical meter

Meter component with vertical orientation for space-saving layouts:

<KolMeter _label="Liquid level" _max={100} _min={0} _orientation="vertical" _unit="%" _value={75} />

Meter without states

Meter component without defined ranges (_low, _high, _optimum):

<KolMeter _label="Input signal" _max={100} _min={-100} _unit="dBm" _value={25} />

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

---