Skip to main content

Navigation and disclosure

SegmentedControl

A pill-shaped selection control. Like a Radio Group, but with better posture and a satisfying slide animation.

Curated demo

Reference

A pill-shaped selection control. Like a Radio Group, but with better posture and a satisfying slide animation.

  • Use SegmentedControl for switching between views or modes within a single context.
  • The background thumb slides smoothly between options with a spring animation.
  • Perfect for compact toggles where a full Tab set is too much.

Props

Name Type Default Description
name * string — The name of the radio group.
options * Option[] — The list of options.
defaultValue string — The initially selected value.
class string — Additional CSS classes.

Example snippet

<SegmentedControl name="view" options={[{label: "List", value: "list"}, {label: "Grid", value: "grid"}]} defaultValue="grid" />