Checkbox-backed switches, segmented toggles and theme flips.
A switch is a checkbox with a different shape, and building it any other way is how you lose keyboard support. Everything here is a real `<input type="checkbox">` with the visual built from its sibling, so space toggles it, the label clicks it, and the state is in the DOM rather than in a class you have to keep in sync.
iOS-style toggle that slides a knob and lights up blue when on. Shown in both ON and OFF states with labels.
Square-edged switch with an ocean gradient knob that slides horizontally. Shown in both states with labels.
Round toggle whose blue knob glows and emits a halo when on. Shown in both states with labels.
Two-position light/dark switch with an ocean thumb that springs between the sun and moon.
Real <input type="checkbox"> styled with a blue fill and a checkmark that springs in — keyboard focus included.
Light / Auto / Dark segmented control with an ocean pill that springs between radios.
Track carrying its own ON and OFF words, cross-faded rather than translated, with a real checkbox behind it so it keeps focus and keyboard toggling.
Three exclusive options as real radios, so arrow keys move between segments — a row of buttons would need a Tab stop each.
Toggle whose knob carries a spinner once flipped, for settings that persist over the network and are not actually on until the server says so.
Plan picker where the whole card is the label and the radio dot scales in on an overshoot, so the selection has weight without a layout change.
Track carrying a tick and a cross drawn from borders, cross-faded so state is legible without relying on colour alone.
Grouped options under a select-all whose indeterminate state is a bar rather than a tick, the one case a checkbox has three readings.
Parent control in the mixed state its children actually put it in — the tick collapsed to a dash rather than swapped for a different glyph — with the tally spelled out beside it.
IEC power glyph as the control itself, the broken ring and its stem lighting together and the housing picking up an ambient glow so the off state is unmistakably dead.
Hardware-style control turning through 240 degrees of its detent ring, the pointer riding the body so the value is read where the mark meets the ticks.
Preference rows where the whole line is the target and the thumb stretches under the pointer before it travels, so the switch feels pressed rather than clicked.
Physical O/I rocker switch that tips over in perspective and lights its orange side when checked.
A square thumb in a square track that slides across, spins and morphs into a circle inside a fuchsia pill when checked.
Favorite toggle whose star fills amber, spins into place and fires an expanding ring when checked.
A grey padlock whose shackle lifts and swings open, turning the body emerald when unlocked.
Hollow outline switch that ignites like a cyan neon tube, with a glowing thumb, when checked.
Show/hide password toggle where a closed eyelid opens and an indigo pupil pops in when checked.
Wide switch that carries the words ON and OFF inside its track, each sliding out of view as the knob takes its place.
Checkbox that floods with teal liquid rising on a curved surface, the tick springing in once the box is full.
Showing 24 of 30. Search the rest →
Floating labels, filled and outlined fields, focus rings.
Inputs, selects, checkboxes, radios and segmented controls.
Rotating loaders built from borders, conic gradients and dots.
Two faces, one element, rotated on hover or focus.
Hover and focus tips with arrows, no positioning library.
Backdrops, sheets, drawers and dialog transitions.