Skip to main content
CodeOath
← All challenges

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.