Segmented Control

A segmented control is a unified set of closely related, mutually exclusive options where only one can be selected at a time. It allows users to filter, change the presentation, input, or browse content within the same view, context or data.

  • Can be controlled or uncontrolled

  • Full keyboard navigation

  • Animated with Motion

  • Respects reduce motion with system settings and through props

Pure UI

Installation

Loading...

Usage

<SegmentedControl>
  <SegmentedControlItem />
</SegmentedControl>

Examples

Content

SegmentedControl is built on top of Radix’s ToggleGroup component. Unlike Tabs, this means that you need to manage content yourself.

Motion

You can use MotionPanel to animate the content when it changes.

Reduce Motion

Disabled

API Reference

SegmentedControl

PropTypeDefault
reduceMotion
boolean
false

Support all Root Radix API except orientation and type.

SegmentedControlItem

Support all Item Radix API

PrevMotion Panel