# Ring meter

The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.

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

> 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. The glass is the kit’s display black with a glare fixed upper left; the bezel is the knob’s spun metal with an engraved zero mark at twelve. The digits are Geist Mono in the VFD’s light and sized in container units, so a ring of any size keeps its proportions.

## Variants

- A share · with an inner ring
- Countdown · what is left
- Time left · one amber colour
- no inner ring

## States

- Empty
- Under way
- Past warning
- Past alarm
- Full
- No reading

## Props and options

| Name | Kind | Description |
| - | - | - |
| value | attribute · property | The reading. Setting it steps the lamps round: a whole turn in about half a second. |
| min · max | attribute | The scale: the full ring. |
| label | attribute | Printed in the glass under the digits, and the meter’s accessible name. |
| unit · unit-text | attribute | Beside the digits; the spoken form for aria-valuetext. |
| warn · alarm | attribute | Where every lit lamp turns amber, then red. Alarm under warn means low is bad (a budget left). |
| lamp | attribute | The colour below the lines, or the one colour: amber for a run that is still working. |
| segments | attribute |  |
| inner · inner-label | attribute · property | A second share on small dots inside, lit in display light, with its own line of words. |
| mode | attribute | The ring is what is left: lamps go out from twelve, clockwise, as the value runs down. |
| format | attribute | The value is seconds, shown as 4. |
| decimals | attribute | Decimals in the digits and the words. |
| data-zone · data-lamp · data-state | attribute | The line the value is past, the lamps’ colour, and whether the lamps are stepping. |
| Keyboard | keyboard | Nothing in it takes focus: a meter is read, not operated. Its value is in the accessibility tree. |

## Usage notes

Read usage: the lamps step round to the new share. The run’s countdown goes out from twelve, a lamp every ten seconds. Every state is below.

## Accessibility

- The lamps, the dots and the digits are its picture and are hidden from assistive technology. It takes no focus.
- Colour is never alone: the digits give the figure, the arc gives the share, and the words name the line.
- Reduced motion: the lamps jump to the reading. Nothing blinks.

## Related parts

- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.