Selection And Input
Toggles
A 51×31 track with a 28px circular thumb that translates exactly 23px on check — one of the most precisely confirmed components in this whole manual.
Findings
What's actually in /ig
- ._9nq9{height:31px;width:51px} — the track, confirmed at the literal selector.
- ._9nqb:before{height:28px;width:28px;border-radius:14px} — the thumb, with a layered shadow (0 3px 8px rgba(0,0,0,.15), two finer 1px shadows).
- Checked state: background-color:#2d88ff (also seen as #1877f2), thumb transform:translate(23px) — and 51 − 28 = 23, so the thumb travels exactly the remaining track width.
- Disabled state drops to opacity:.3, not a colour change.
Usage
When to use it
Use when
Use for a binary, immediately-applied setting such as notifications on/off, dark mode, or a feature flag.
Avoid when
Avoid when a choice needs confirmation, contains more than two values, or triggers navigation; use Buttons, Pickers, or Menus instead.
Anatomy
Anatomy
- 01
Track (51×31, 20px radius)
- 02
Thumb (28×28, 14px radius)
- 03
Checked fill colour
- 04
Disabled opacity
Specification
Spacing, colour, type, and motion
- Track
- 51×31px with 20px radius
- Thumb
- 28×28px with 14px radius
- Checked fill
- #2d88ff
- Checked transform
- translate(23px)
- Disabled
- opacity:.3
- Thumb shadow
- 0 3px 8px rgba(0,0,0,.15) plus finer 1px shadows
States
States
| State | Behaviour |
|---|---|
| Off | Default state with neutral track and thumb at the start position. |
| On | Checked state fills the track with #2d88ff and translates the thumb exactly 23px. |
| Disabled off | Off toggle drops to .3 opacity and no longer accepts interaction. |
| Disabled on | Checked toggle remains visually on but drops to .3 opacity. |
| Pressed | A brief opacity or pressed feedback can appear while the thumb transform remains the only movement. |
Examples
Real interface compositions
Post settings
Hide like count setting
The setting row pairs a text lockup with the exact 51x31 switch; checking it moves the 28px thumb exactly 23px and disabling drops the whole control to .3 opacity.
51x31 track, 28px thumb, translate(23px), disabled opacity .3
Guidance
Usage guidance
- Use the exact 51×31 / 28×28 / translate(23px) numbers — they're confirmed, not estimated, and they're internally consistent (23 = 51 − 28).
- Disable by dropping opacity to .3, not by recolouring the track.
Do / Don't
Do / Don't
Do
- Reuse the confirmed dimensions verbatim rather than rounding to 50×30 or similar 'clean' numbers — the source isn't round.
Don’t
- Animate the thumb with anything but transform: translate — no scale or colour-interpolation was found on the thumb itself.
Code
Evidence-backed CSS
.toggle__track { width: 51px; height: 31px; border-radius: 20px; background: #0000000d; border: .5px solid rgba(0,0,0,.1); transition: .5s ease; }
.toggle__track[data-checked="true"] { background: #2d88ff; }
.toggle__thumb { width: 28px; height: 28px; border-radius: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: .5s ease; }
.toggle__track[data-checked="true"] .toggle__thumb { transform: translate(23px); }
.toggle[disabled] { opacity: .3; }