# Meter Input

> Source: https://design.nanatec.co.ke/components/meter-input/
> A utility-meter reading field for rentals. Shows the previous reading beside the box, refuses a reading that runs backwards, and explains a consumption figure that does not look like the usual one for the meter.
> Status: stable
> Since: v0.0.28

Reading a water or electricity meter is three jobs at once: remember what the
dial said last time, refuse a number that cannot be right, and say something
useful when the number is possible but surprising. The meter input does all
three in one field.

## Preview

```html
<nana-meter-input
  label="Water reading"
  unit="m³"
  previous="1240"
  previous-date="2026-08-03"
  average="18"
  value="1258"
  style="max-width:22rem"
></nana-meter-input>
```

## Installation

The meter input ships for all three targets. Pick the tab for your project — the
CLI detects which you are on and serves the matching implementation.

The attribute names, events and CSS hooks below are the Web Components
reference.

## Events

| Event | Type | Description |
|---|---|---|
| `nana-input` | `CustomEvent` | Fired on every keystroke (`detail.value`) |
| `nana-change` | `CustomEvent` | Fired when the reading is committed (`detail.value`) |
| `nana-anomaly` | `CustomEvent` | Fired when the reading starts or stops looking wrong (`detail.anomaly`, `detail.consumption`, `detail.ratio`) |
| `nana-focus` | `CustomEvent` | Fired on focus |
| `nana-blur` | `CustomEvent` | Fired on blur |

## Slots

| Slot | Description |
|---|---|
| `explanation` | Replaces the generated anomaly wording |
| `suffix` | Content after the field, in place of the unit label |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The field container |
| `previous` | The previous-reading line above the field |
| `wrapper` | The bordered field container |
| `input` | The native `<input>` element |
| `unit` | The unit label inside the field |
| `consumption` | The consumption readout below the field |
| `explanation` | The anomaly explanation |
| `error` | The validation message |

## Accessibility

The previous reading is tied to the field with `aria-describedby`, so a screen
reader hears what the number is measured from before it is typed. The
explanation is a `role="status"` region — it announces politely when it appears,
because it is advice, not a failure — while the validation message is a
`role="alert"`.

Sizes follow the same ramp as [Input](/components/input/), [Select](/components/select/)
and [Combobox](/components/combobox/), so a meter reading sits on the same line
as the rest of a form without adjustment.

## Related components

<ul class="related not-content">
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/format-number/">Format Number</a></li>
  <li><a href="/components/format-date/">Format Date</a></li>
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/empty-state/">Empty State</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-meter-input--docs