Kit part · Progress

Ladder

An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.

Element: <div>
Needs: kit.css
Rules: meter.rules.md · 4
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Variants

24 segments · default

12 segments, taller

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Quiet	Nominal	Hot	Clipping
Ladder

Graphite

Part	Quiet	Nominal	Hot	Clipping
Ladder

API

Name	Kind	Values	What it does
.tui-ladder	class	10px tall	A strip of lit segments on dark glass.
--v	CSS property	0–1 · 0.5	How much is lit. Update it as the value moves; it eases over 90ms.
--n	CSS property	24	Number of segments.
height	CSS property	any	Taller ladders for primary meters.
role="meter" · aria-value*	attribute	you add	The kit draws it; give it a role and values so it is read.

Markup

<div class="tui-field">
  <span class="tui-label" id="lvl">Input level · −6 dB</span>
  <div class="tui-ladder" style="--v:.62" role="meter" aria-labelledby="lvl"
       aria-valuemin="0" aria-valuemax="1" aria-valuenow="0.62"></div>
</div>

Needs kit.css only, no script. How to install the kit.

Add role="meter", a name and aria-valuenow, or print the number next to it: colour must never be the only signal.
Under reduced motion the transition is off; the value is still drawn.

How it’s built

Two pseudo-elements with the same three-stop gradient (green to 70%, amber to 88%, red), masked into segments by a repeating gradient. The lower one, at 14% opacity, is the unlit LEDs; the upper one is clipped to --v with clip-path. No script: set --v from yours.

Rules

meter.rules.mdIn the brain

A ladder is for values with a safe zone; pair it with a label and a number.

4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain