Challenge

Segmented Control

Hard

css
javascript
design-match

Match the target: a pill-shaped segmented control where a solid indicator slides to sit behind whichever option was clicked, instead of the label just re-coloring in place.

Check your work against

Exactly three options inside one pill-shaped track
The selected option's label is visually distinct (color/weight) from the other two
A solid indicator behind the selection slides to its new position on click — it doesn't jump or just re-color
Works correctly however far apart the current and clicked options are, not only between neighbors

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.