Segmented Control
A segmented control component that allows users to select between multiple options. Built using Radix UI's Tabs primitive, it provides an accessible and customizable interface for switching between different views or options.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Terminal
Create or update your SegmentedControl component
Copy this code to create your SegmentedControl component
/components/ui/SegmentedControl.tsx
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
With Icons
Add icons to the segmented control
With style: rounded
Rounded style with full radius
API Reference
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
items | "Array<{ value: string; label: string }>" | "[]" | Array of items to display in the segmented control |
value | "string" | "undefined" | The controlled value of the selected tab |
onValueChange | "(value: string) => void" | "undefined" | Callback fired when the value changes |
className | "string" | "undefined" | Additional classes for the root element |
tabsClassName | "string" | "undefined" | Additional classes for the tabs list |
tabClassName | "string" | "undefined" | Additional classes for individual tab triggers |