# LCD

A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.

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

> 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

A span in Geist Mono with tabular figures: a grey-green fill with a glare gradient, a shadow inset at the top, and a one-pixel offset text-shadow for the gap between the segments and the back plate. The only literal colours are the display tokens: light, not paint.

## Variants

- Battery
- Clock
- Signed

## States

- Small
- Default
- Large

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-ghost | attribute | The unlit segments, drawn behind the value. Same width as the value, digits as 8. |

## Usage notes

Look behind the digits: the unlit segments stay faintly visible, as on the real glass.

## Accessibility

- It is text: screen readers read the value and the unit. The ghost is a pseudo-element and is not read.
- Segments on glass hold above 7:1.

## Related parts

- [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.
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.
- [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.