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
_labelso 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
_labelthat clearly describes the measurement context (e.g. load, level, temperature). - Set
_minand_maxaccording to the domain so users can interpret the value correctly. - Use
_low,_highand_optimumto classify the value into meaningful ranges. - Provide a clear
_unitif the value would be ambiguous without it. - Use
Meterfor 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.
_minto_low: low range_lowto_high: medium range_highto_max: high range_optimumdefines 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 | From this value to the max value is the high range of the meter. Below this value is the middle 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 | From this value to the min value is the low range of the meter. Above this value is the middle range. | number | undefined | undefined |
_max | _max | Defines the maximum value of the element. Default like native component. | number | 1 |
_min | _min | Defines the minimum value of the element. Default like native component. | number | 0 |
_optimum | _optimum | Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical. | 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 value. | string | '%' |
_value (required) | _value | Defines the value of the element. Is capped between min and max. | number | undefined |