Segmented Toggle — Free HTML CSS JS Control Snippet

The segmented control — a row of options in a single pill where one is always selected — is the cleaner alternative to a dropdown when you have two to four mutually exclusive choices: view modes, billing periods, time ranges, filters. The hallmark of a good one is the "glider": a highlight that slides smoothly from segment to segment rather than blinking on and off. This component builds a proper segmented toggle with a glider that both slides and resizes to fit segments of different widths, icon support, keyboard navigation, and a live readout — in HTML, CSS, and vanilla JavaScript.

The sliding, resizing glider

A single white .sgt-glider element sits behind the segments with z-index: 0 while the segment buttons sit above at z-index: 1. When a segment is selected, moveGlider() reads that segment's offsetWidth and offsetLeft and sets the glider's width and transform: translateX() to match (offset by the 4px container padding). Both are CSS-transitioned, so the glider glides across and grows or shrinks to exactly fit the new segment — important because "Grid", "List", and "Compact", or "Monthly" and "Annual -20%", are all different widths. Measuring from the live DOM means it is always pixel-correct without hard-coded sizes.

Why transform, not left

The glider animates with transform: translateX() rather than animating the left property. Transforms are GPU-composited and do not trigger layout, so the slide stays at 60fps; animating left would force a layout recalculation on every frame. Combined with the width transition (which does relayout the glider only, a tiny element), the motion is smooth and cheap.

A reusable group setup

setupGroup() wires any segmented control — it is called twice here, once for the three-way view toggle and once for the two-way billing toggle, proving the pattern scales to any number of segments. Each group manages its own glider, its own active state via the .active class and aria-selected, and writes its choice into a shared state object that drives the live readout. Adding a third control is one more setupGroup() call.

Keyboard navigation and ARIA

Each control is a role="tablist" of role="tab" buttons with aria-selected tracking the choice. Arrow Left and Arrow Right move the selection within a group (wrapping around with modulo) and move focus to the newly selected segment — the expected keyboard behaviour for a segmented control. Because the segments are real <button>s, they are focusable and clickable out of the box; the active segment's text also recolours to the accent so the selection is clear even to users who do not perceive the glider's position.

Resize handling

If the layout reflows — a font loads, the container resizes, the page goes responsive — the glider must re-align to the (possibly moved) active segment. A resize listener re-runs each group's moveGlider() for its current active index, so the glider never drifts out from under the selected segment. This is the detail that separates a robust control from one that looks broken after a window resize.

Customisation

Add or remove segments in the markup (and the matching LABELS entry); the glider adapts to the new widths automatically. Drop the SVG icons or add your own, use the .sgt-pill badge for callouts like discounts, swap the #6366f1 active colour and the #e9eef4 track for your palette, and read the selected values from the state object (or wire select() to your app — change a layout, toggle pricing, filter a list).