UI.BlueStack.io - Component Library

segmented-control Component

Segmented Control

A segmented control is used to switch between different views or filter content. It functions like a styled radio button group where only one option can be selected at a time.

Basic Segmented Control

<div class="space-y-4">
                
                <div class="segmented-control">
                    <button class="segment active">Overview</button>
                    <button class="segment">Details</button>
                    <button class="segment">Activity</button>
                    <button class="segment">Settings</button>
                </div>

                
                <div class="segmented-control">
                    <button class="segment active">
                        <span>All</span>
                        <span class="text-xs text-gray-500">123</span>
                    </button>
                    <button class="segment">
                        <span>Active</span>
                        <span class="text-xs text-gray-500">89</span>
                    </button>
                    <button class="segment">
                        <span>Completed</span>
                        <span class="text-xs text-gray-500">34</span>
                    </button>
                </div>
            </div>

<div class="space-y-4">
                
                <div class="segmented-control">
                    <button class="segment active">Overview</button>
                    <button class="segment">Details</button>
                    <button class="segment">Activity</button>
                    <button class="segment">Settings</button>
                </div>

<div class="segmented-control">
                    <button class="segment active">
                        <span>All</span>
                        <span class="text-xs text-gray-500">123</span>
                    </button>
                    <button class="segment">
                        <span>Active</span>
                        <span class="text-xs text-gray-500">89</span>
                    </button>
                    <button class="segment">
                        <span>Completed</span>
                        <span class="text-xs text-gray-500">34</span>
                    </button>
                </div>
            </div>

Size Variants

<div class="space-y-4">
                
                <div class="segmented-control tiny">
                    <button class="segment active">Tiny</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control small">
                    <button class="segment active">Small</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control">
                    <button class="segment active">Default</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control large">
                    <button class="segment active">Large</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control big">
                    <button class="segment active">Big</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

<div class="space-y-4">
                
                <div class="segmented-control tiny">
                    <button class="segment active">Tiny</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control small">
                    <button class="segment active">Small</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control">
                    <button class="segment active">Default</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control large">
                    <button class="segment active">Large</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control big">
                    <button class="segment active">Big</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

Semantic Color Variants

<div class="space-y-4">
                
                <div class="segmented-control">
                    <button class="segment active">Default</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control primary">
                    <button class="segment active">Primary</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control positive">
                    <button class="segment active">Positive</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control negative">
                    <button class="segment active">Negative</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control warning">
                    <button class="segment active">Warning</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control info">
                    <button class="segment active">Info</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

<div class="space-y-4">
                
                <div class="segmented-control">
                    <button class="segment active">Default</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control primary">
                    <button class="segment active">Primary</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control positive">
                    <button class="segment active">Positive</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control negative">
                    <button class="segment active">Negative</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control warning">
                    <button class="segment active">Warning</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control info">
                    <button class="segment active">Info</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

Extended Color Palette

<div class="space-y-4">
                
                <div class="segmented-control red">
                    <button class="segment active">Red</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control orange">
                    <button class="segment active">Orange</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control yellow">
                    <button class="segment active">Yellow</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control green">
                    <button class="segment active">Green</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control teal">
                    <button class="segment active">Teal</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control blue">
                    <button class="segment active">Blue</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control violet">
                    <button class="segment active">Violet</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control purple">
                    <button class="segment active">Purple</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control pink">
                    <button class="segment active">Pink</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control brown">
                    <button class="segment active">Brown</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control grey">
                    <button class="segment active">Grey</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                
                <div class="segmented-control black">
                    <button class="segment active">Black</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

<div class="space-y-4">
                
                <div class="segmented-control red">
                    <button class="segment active">Red</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control orange">
                    <button class="segment active">Orange</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control yellow">
                    <button class="segment active">Yellow</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control green">
                    <button class="segment active">Green</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control teal">
                    <button class="segment active">Teal</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control blue">
                    <button class="segment active">Blue</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control violet">
                    <button class="segment active">Violet</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control purple">
                    <button class="segment active">Purple</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control pink">
                    <button class="segment active">Pink</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control brown">
                    <button class="segment active">Brown</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control grey">
                    <button class="segment active">Grey</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

<div class="segmented-control black">
                    <button class="segment active">Black</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>
            </div>

Segmented Control with Icons

Icons with Text

<div class="space-y-4">
                <div class="segmented-control">
                    <button class="segment active">
                        <i class="icon grid-3x3 w-4 h-4"></i>
                        <span>Grid</span>
                    </button>
                    <button class="segment">
                        <i class="icon list w-4 h-4"></i>
                        <span>List</span>
                    </button>
                    <button class="segment">
                        <i class="icon layout-dashboard w-4 h-4"></i>
                        <span>Cards</span>
                    </button>
                </div>

                <div class="segmented-control primary">
                    <button class="segment active">
                        <i class="icon home w-4 h-4"></i>
                        <span>Home</span>
                    </button>
                    <button class="segment">
                        <i class="icon user w-4 h-4"></i>
                        <span>Profile</span>
                    </button>
                    <button class="segment">
                        <i class="icon settings w-4 h-4"></i>
                        <span>Settings</span>
                    </button>
                    <button class="segment">
                        <i class="icon bell w-4 h-4"></i>
                        <span>Notifications</span>
                    </button>
                </div>
            </div>

<div class="space-y-4">
                <div class="segmented-control">
                    <button class="segment active">
                        <i class="icon grid-3x3 w-4 h-4"></i>
                        <span>Grid</span>
                    </button>
                    <button class="segment">
                        <i class="icon list w-4 h-4"></i>
                        <span>List</span>
                    </button>
                    <button class="segment">
                        <i class="icon layout-dashboard w-4 h-4"></i>
                        <span>Cards</span>
                    </button>
                </div>

<div class="segmented-control primary">
                    <button class="segment active">
                        <i class="icon home w-4 h-4"></i>
                        <span>Home</span>
                    </button>
                    <button class="segment">
                        <i class="icon user w-4 h-4"></i>
                        <span>Profile</span>
                    </button>
                    <button class="segment">
                        <i class="icon settings w-4 h-4"></i>
                        <span>Settings</span>
                    </button>
                    <button class="segment">
                        <i class="icon bell w-4 h-4"></i>
                        <span>Notifications</span>
                    </button>
                </div>
            </div>

Icon Only

<div class="space-y-4">
                <div class="segmented-control icon-only">
                    <button class="segment active" aria-label="Grid view">
                        <i class="icon grid-3x3 w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="List view">
                        <i class="icon list w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="Gallery view">
                        <i class="icon layout-grid w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="Card view">
                        <i class="icon square w-5 h-5"></i>
                    </button>
                </div>

                
                <div class="segmented-control icon-only positive">
                    <button class="segment active" aria-label="Bold">
                        <i class="icon bold w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="Italic">
                        <i class="icon italic w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="Underline">
                        <i class="icon underline w-5 h-5"></i>
                    </button>
                    <button class="segment" aria-label="Strikethrough">
                        <i class="icon strikethrough w-5 h-5"></i>
                    </button>
                </div>
            </div>

Layout Variations

Fluid Width

<div class="segmented-control fluid">
                <button class="segment active">First</button>
                <button class="segment">Second</button>
                <button class="segment">Third</button>
                <button class="segment">Fourth</button>
            </div>

Vertical Orientation

<div class="segmented-control vertical" style="width: 200px;">
                <button class="segment active">
                    <i class="icon layout-dashboard w-4 h-4"></i>
                    <span>Dashboard</span>
                </button>
                <button class="segment">
                    <i class="icon bar-chart-3 w-4 h-4"></i>
                    <span>Analytics</span>
                </button>
                <button class="segment">
                    <i class="icon file-text w-4 h-4"></i>
                    <span>Reports</span>
                </button>
                <button class="segment">
                    <i class="icon users w-4 h-4"></i>
                    <span>Team</span>
                </button>
                <button class="segment">
                    <i class="icon settings w-4 h-4"></i>
                    <span>Settings</span>
                </button>
            </div>

Compact Style

<div class="space-y-4">
                <div class="segmented-control compact">
                    <button class="segment active">All</button>
                    <button class="segment">Open</button>
                    <button class="segment">Closed</button>
                </div>

                <div class="segmented-control compact primary">
                    <button class="segment active">Day</button>
                    <button class="segment">Week</button>
                    <button class="segment">Month</button>
                    <button class="segment">Year</button>
                </div>
            </div>

Style Variations

Pills Style

<div class="space-y-4">
                <div class="segmented-control pills">
                    <button class="segment active">All</button>
                    <button class="segment">Active</button>
                    <button class="segment">Completed</button>
                </div>

                <div class="segmented-control pills primary">
                    <button class="segment active">
                        <i class="icon image w-4 h-4"></i>
                        <span>Photos</span>
                    </button>
                    <button class="segment">
                        <i class="icon video w-4 h-4"></i>
                        <span>Videos</span>
                    </button>
                    <button class="segment">
                        <i class="icon file w-4 h-4"></i>
                        <span>Documents</span>
                    </button>
                </div>
            </div>

Basic Style

<div class="space-y-4">
                <div class="segmented-control basic">
                    <button class="segment active">All</button>
                    <button class="segment">Active</button>
                    <button class="segment">Completed</button>
                </div>

                <div class="segmented-control basic primary">
                    <button class="segment active">Overview</button>
                    <button class="segment">Details</button>
                    <button class="segment">Activity</button>
                </div>
            </div>

Outline Style

<div class="space-y-4">
                <div class="segmented-control outline">
                    <button class="segment active">Option 1</button>
                    <button class="segment">Option 2</button>
                    <button class="segment">Option 3</button>
                </div>

                <div class="segmented-control outline positive">
                    <button class="segment active">Approved</button>
                    <button class="segment">Pending</button>
                    <button class="segment">Rejected</button>
                </div>
            </div>

States and Interactions

Disabled Segments

<div class="segmented-control">
                <button class="segment active">Available</button>
                <button class="segment" disabled>Unavailable</button>
                <button class="segment">Pending</button>
                <button class="segment" disabled>Locked</button>
            </div>

With Data Values

Selected: day

<div class="space-y-4">
                <div class="segmented-control" id="time-control">
                    <button class="segment active" data-value="day">Day</button>
                    <button class="segment" data-value="week">Week</button>
                    <button class="segment" data-value="month">Month</button>
                    <button class="segment" data-value="year">Year</button>
                </div>
                <p class="text-sm text-gray-600">
                    Selected: <span id="selected-time" class="font-mono bg-gray-100 px-2 py-1 rounded">day</span>
                </p>
            </div>

Loading State

<div class="segmented-control">
                <button class="segment active">
                    <i class="icon loader animate-spin w-4 h-4"></i>
                    <span>Loading...</span>
                </button>
                <button class="segment">Option 2</button>
                <button class="segment">Option 3</button>
            </div>

Interactive Example

View Switcher

Chart View

Table View

Name	Value	Status
Product A	$1,234	Active
Product B	$2,345	Pending

<div class="space-y-4">
                <div class="segmented-control primary" id="view-switcher">
                    <button class="segment active" data-view="chart">
                        <i class="icon bar-chart-3 w-4 h-4"></i>
                        <span>Chart</span>
                    </button>
                    <button class="segment" data-view="table">
                        <i class="icon table w-4 h-4"></i>
                        <span>Table</span>
                    </button>
                    <button class="segment" data-view="list">
                        <i class="icon list w-4 h-4"></i>
                        <span>List</span>
                    </button>
                    <button class="segment" data-view="calendar">
                        <i class="icon calendar w-4 h-4"></i>
                        <span>Calendar</span>
                    </button>
                </div>

                <div id="view-content" class="p-6 bg-gray-50 rounded-lg">
                    <div data-content="chart" class="view-panel">
                        <h3 class="font-semibold mb-3">Chart View</h3>
                        <div class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white">
                            <i class="icon bar-chart-3 w-16 h-16"></i>
                        </div>
                    </div>
                    <div data-content="table" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">Table View</h3>
                        <table class="w-full">
                            <thead>
                                <tr class="border-b">
                                    <th class="text-left p-2">Name</th>
                                    <th class="text-left p-2">Value</th>
                                    <th class="text-left p-2">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b">
                                    <td class="p-2">Product A</td>
                                    <td class="p-2">$1,234</td>
                                    <td class="p-2"><span class="text-green-600">Active</span></td>
                                </tr>
                                <tr class="border-b">
                                    <td class="p-2">Product B</td>
                                    <td class="p-2">$2,345</td>
                                    <td class="p-2"><span class="text-yellow-600">Pending</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div data-content="list" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">List View</h3>
                        <ul class="space-y-2">
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon file-text w-5 h-5 text-blue-500"></i>
                                <span>Quarterly Report</span>
                            </li>
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon trending-up w-5 h-5 text-green-500"></i>
                                <span>Growth Analysis</span>
                            </li>
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon shield w-5 h-5 text-purple-500"></i>
                                <span>Security Audit</span>
                            </li>
                        </ul>
                    </div>
                    <div data-content="calendar" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">Calendar View</h3>
                        <div class="grid grid-cols-7 gap-2 text-center">
                            <div class="p-2 font-semibold text-sm">Sun</div>
                            <div class="p-2 font-semibold text-sm">Mon</div>
                            <div class="p-2 font-semibold text-sm">Tue</div>
                            <div class="p-2 font-semibold text-sm">Wed</div>
                            <div class="p-2 font-semibold text-sm">Thu</div>
                            <div class="p-2 font-semibold text-sm">Fri</div>
                            <div class="p-2 font-semibold text-sm">Sat</div>
                            <div class="p-2 text-gray-400">30</div>
                            <div class="p-2">1</div>
                            <div class="p-2">2</div>
                            <div class="p-2 bg-blue-100 rounded">3</div>
                            <div class="p-2">4</div>
                            <div class="p-2">5</div>
                            <div class="p-2">6</div>
                        </div>
                    </div>
                </div>
            </div>

<div class="space-y-4">
                <div class="segmented-control primary" id="view-switcher">
                    <button class="segment active" data-view="chart">
                        <i class="icon bar-chart-3 w-4 h-4"></i>
                        <span>Chart</span>
                    </button>
                    <button class="segment" data-view="table">
                        <i class="icon table w-4 h-4"></i>
                        <span>Table</span>
                    </button>
                    <button class="segment" data-view="list">
                        <i class="icon list w-4 h-4"></i>
                        <span>List</span>
                    </button>
                    <button class="segment" data-view="calendar">
                        <i class="icon calendar w-4 h-4"></i>
                        <span>Calendar</span>
                    </button>
                </div>

<div id="view-content" class="p-6 bg-gray-50 rounded-lg">
                    <div data-content="chart" class="view-panel">
                        <h3 class="font-semibold mb-3">Chart View</h3>
                        <div class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white">
                            <i class="icon bar-chart-3 w-16 h-16"></i>
                        </div>
                    </div>
                    <div data-content="table" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">Table View</h3>
                        <table class="w-full">
                            <thead>
                                <tr class="border-b">
                                    <th class="text-left p-2">Name</th>
                                    <th class="text-left p-2">Value</th>
                                    <th class="text-left p-2">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b">
                                    <td class="p-2">Product A</td>
                                    <td class="p-2">$1,234</td>
                                    <td class="p-2"><span class="text-green-600">Active</span></td>
                                </tr>
                                <tr class="border-b">
                                    <td class="p-2">Product B</td>
                                    <td class="p-2">$2,345</td>
                                    <td class="p-2"><span class="text-yellow-600">Pending</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div data-content="list" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">List View</h3>
                        <ul class="space-y-2">
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon file-text w-5 h-5 text-blue-500"></i>
                                <span>Quarterly Report</span>
                            </li>
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon trending-up w-5 h-5 text-green-500"></i>
                                <span>Growth Analysis</span>
                            </li>
                            <li class="p-3 bg-white rounded-lg border flex items-center gap-3">
                                <i class="icon shield w-5 h-5 text-purple-500"></i>
                                <span>Security Audit</span>
                            </li>
                        </ul>
                    </div>
                    <div data-content="calendar" class="view-panel hidden">
                        <h3 class="font-semibold mb-3">Calendar View</h3>
                        <div class="grid grid-cols-7 gap-2 text-center">
                            <div class="p-2 font-semibold text-sm">Sun</div>
                            <div class="p-2 font-semibold text-sm">Mon</div>
                            <div class="p-2 font-semibold text-sm">Tue</div>
                            <div class="p-2 font-semibold text-sm">Wed</div>
                            <div class="p-2 font-semibold text-sm">Thu</div>
                            <div class="p-2 font-semibold text-sm">Fri</div>
                            <div class="p-2 font-semibold text-sm">Sat</div>
                            <div class="p-2 text-gray-400">30</div>
                            <div class="p-2">1</div>
                            <div class="p-2">2</div>
                            <div class="p-2 bg-blue-100 rounded">3</div>
                            <div class="p-2">4</div>
                            <div class="p-2">5</div>
                            <div class="p-2">6</div>
                        </div>
                    </div>
                </div>
            </div>

Responsive Behavior

Responsive Segmented Control

This control stacks vertically on mobile screens (< 640px)

<div class="space-y-4">
                <div class="segmented-control responsive fluid">
                    <button class="segment active">Overview</button>
                    <button class="segment">Analytics</button>
                    <button class="segment">Reports</button>
                    <button class="segment">Settings</button>
                </div>
                <p class="text-sm text-gray-600">
                    This control stacks vertically on mobile screens (< 640px)
                </p>
            </div>