# Readout

A printed label over a value: key figures, with the unit small and the change in words.

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

> 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

Three lines of type in a grid. No images, no script.

## Variants

- Going up
- Going down
- With a status

## States

- Up
- Down
- Neutral
- With a status

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-dir | attribute | Prints a small green ▲ or red ▼ before the words. |

## Usage notes

Numbers are tabular, so columns of readouts line up digit for digit.

## Accessibility

- The arrow is a pseudo-element and is not read out, so the words must say the direction.

## Related parts

- [Spec list](https://tactileui.dev/parts/spec): Key and value facts, printed like the plate on the back of a device.
- [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.
- [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.