# Needle gauge

A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the exact reading.

Kit part · With the Kit · https://tactileui.dev/parts/gauge

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Plain DOM and SVG, no canvas. The face is printed once as SVG from the scale (ticks, figures, the unit, hatched and solid bands) and reprinted only when the scale changes. The pivot cap, the bezel’s bow-tie highlight and the glass’s glare are fixed layers above and below: nothing lit turns.

## Variants

- Round
- Arc · wide face, pivot low
- Low is bad · alarm under warn
- No bands · no readout

## States

- In range
- Warning band
- Alarm band
- Off the scale
- No reading

## Props and options

| Name | Kind | Description |
| - | - | - |
| value | attribute · property | The reading. Setting it swings the needle; past either end it rests on the stop and says so. |
| min · max | attribute | The scale’s ends. |
| label | attribute | Printed on the face beside the lamp, and the meter’s accessible name: “GPU 0”. |
| unit · unit-text | attribute | Printed large above the pivot and on the LCD; the spoken form for aria-valuetext. |
| warn · alarm | attribute | Bands from the warning line (hatched) and the alarm line (solid) to the end. Alarm under warn means low is bad. |
| zones | attribute | Overrides warn and alarm. |
| major | attribute | The step between figures. Auto picks 1 · 2 · 5, and prints every other figure when they would crowd. |
| decimals | attribute | Decimals on the LCD and in the words. |
| face | attribute |  |
| readout | attribute | Leave the LCD out: the needle and the words only. |
| data-zone · data-state | attribute | Written by the part: the band the value is in, and whether the needle is moving. |
| Keyboard | keyboard | Nothing in it takes focus: a meter is read, not operated. Its value is in the accessibility tree. |

## Usage notes

Take a reading: each needle swings past its mark and settles. A value past the scale rests on the stop. The glare and the needle’s shadow stay where the lamp puts them.

## Accessibility

- It takes no focus and needs none: there is nothing to operate. The face, the needle and the LCD are its picture and are hidden from assistive technology.
- Bands are printed in ink (hatched for warning, solid for alarm) and the lamp by the name lights amber or red: position, print and light, never colour alone.
- Reduced motion: the needle jumps to the reading; the LCD, the lamp and the words are exactly the same.

## Related parts

- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
- [Ladder](https://tactileui.dev/parts/ladder): An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.