Skip to content
Ben Serkan ZararsızComponents

Toggles6

Switches, checkboxes and segmented controls – each one tells assistive technology whether it is on, off or which option is chosen.

natnu Switch

  • CSS
  • ARIA switch

The light/dark switch from natnu.design, measured to the pixel: 48 × 32 track, 24 px knob, 0.3 s ease. Same as the one top right.

Track off Silver
Track on Ink
Knob on White
Size
0.30s

Sun & Moon

  • CSS
  • aria-pressed

Rests at −6°, turns to +12° and softens to 70 % on hover, springs in on press. The next icon spins in after each switch.

-6deg
12deg
0.70
0.82
48px
20px

Day & Night

  • CSS
  • ARIA switch

An illustrated switch: the sun sets into a cratered moon, the clouds sink, the stars come out one after another.

Size
Day sky Sky
Night sky Navy
0.60s

Check & Strike

  • CSS
  • Native

Native checkboxes underneath: the box fills with a little bounce, the tick draws itself, the label gets struck through.

Today
Color Indigo
24px
8px
0.35s

Segmented

  • CSS
  • Native radios

One indicator slides between the options – the Emerald / Sapphire switch from the liquid pill demo, as a real radio group.

Fluid essence color
2
Indicator Sapphire
320px
32px
0.40s

Like Burst

  • CSS
  • aria-pressed

The heart pops with an overshoot and a ring of particles bursts out. aria-pressed tells screen readers whether you like it.

8
Color Rose
32px
28px
0.60s