Segmented Control
A set of mutually exclusive options presented as a horizontal pill bar with a sliding active indicator.
Default
The default segmented control keeps labels visible so the interaction model is immediately clear.
tsx
<SegmentedControl
items={[
{ id: "option1", label: "Option 1" },
{ id: "option2", label: "Option 2" },
{ id: "option3", label: "Option 3" },
]}
/>Installation
tsx
import { SegmentedControl } from "madagent";Content Types
Segmented controls are most readable when their content treatments are compared side by side: labels only, icons only, or a combined pattern.
Label Only
tsx
<SegmentedControl
items={[
{ id: "option1", label: "Option 1" },
{ id: "option2", label: "Option 2" },
{ id: "option3", label: "Option 3" },
]}
/>Icon Only
tsx
<SegmentedControl
items={[
{ id: "list", icon: <List /> },
{ id: "grid", icon: <LayoutGrid /> },
]}
/>Icon + Label
tsx
<SegmentedControl
items={[
{ id: "general", icon: <Settings />, label: "General" },
{ id: "notifications", icon: <Bell />, label: "Notifications" },
{ id: "security", icon: <Shield />, label: "Security" },
]}
/>Sizes
tsx
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 28, width: "100%" }}>
<SegmentedControl
size="sm"
items={[
{ id: "left", icon: <AlignLeft /> },
{ id: "center", icon: <AlignCenter /> },
{ id: "right", icon: <AlignRight /> },
]}
/>
<SegmentedControl
size="md"
items={[
{ id: "left", icon: <AlignLeft /> },
{ id: "center", icon: <AlignCenter /> },
{ id: "right", icon: <AlignRight /> },
]}
/>
<SegmentedControl
size="lg"
items={[
{ id: "left", icon: <AlignLeft /> },
{ id: "center", icon: <AlignCenter /> },
{ id: "right", icon: <AlignRight /> },
]}
/>
</div>Disabled Item
tsx
<SegmentedControl
items={[
{ id: "bold", icon: <Bold />, label: "Bold" },
{
id: "italic",
icon: <Italic />,
label: "Italic",
disabled: true,
},
{ id: "underline", icon: <Underline />, label: "Underline" },
]}
/>Full Width
tsx
<div style={{ width: "100%", maxWidth: 480 }}>
<SegmentedControl
fullWidth
items={[
{ id: "light", icon: <Sun />, label: "Light" },
{ id: "dark", icon: <Moon />, label: "Dark" },
{ id: "system", icon: <MonitorCog />, label: "System" },
]}
/>
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items* | SegmentedControlItem[] | - | Array of segment items with id, optional label, optional icon, and optional disabled |
defaultValue | string | - | Initial active segment id (uncontrolled) |
value | string | - | Active segment id (controlled) |
onChange | (id: string) => void | - | Callback when the active segment changes |
size | "sm""md""lg" | "md" | Size of the segmented control |
fullWidth | boolean | false | Stretch to fill the parent width |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
<SegmentedControl
items={[
{ id: "list", icon: <List />, label: "قائمة" },
{ id: "grid", icon: <LayoutGrid />, label: "شبكة" },
{ id: "kanban", icon: <Kanban />, label: "كانبان" },
]}
/>
</div>