Photonix

SegmentedControl

A linear set of two or more segments, each of which functions as a mutually exclusive button.

Preview

Usage
import { SegmentedControl } from '@photonix/ultimate';
import { MenuOutline, AppsOutline } from '@photonix/icons';

<SegmentedControl 
  options={[
    { value: 'daily', label: 'Daily' }, 
    { value: 'weekly', label: 'Weekly' }
  ]}
  value={value}
  onChange={setValue}
/>

<SegmentedControl 
  shape="rounded"
  options={[
    { value: 'list', label: 'List', icon: <MenuOutline /> },
    { value: 'grid', label: 'Grid', icon: <AppsOutline /> }
  ]}
  value="list"
/>

Component API

SegmentedControl

Prop
Type
Default
Description
options
SegmentedControlOption[]
-
Array of options to display
value
string
-
Currently selected value
onChange
(value: string) => void
-
Callback when selection changes
shape
"rounded" | "pill"
'pill'
Visual shape
layout
"full" | "hug" | "equal"
'hug'
Sizing behavior of the segments - 'hug': Each segment width is determined by its content - 'equal': All segments have the same width, determined by the widest item - 'full': The control expands to full container width with equal segments
className
string
-
Additional className

Variants

Label Only

Segments with text labels only.

Label Only
<SegmentedControl
  options={[
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'monthly', label: 'Monthly' }
  ]}
  value="daily"
  onChange={() => {}}
/>

Icon With Label

Segments can combine an icon with a text label.

Icon With Label
<SegmentedControl
  options={[
    { value: 'list', label: 'List', icon: <MenuOutline /> },
    { value: 'grid', label: 'Grid', icon: <AppsOutline /> }
  ]}
  value="list"
  onChange={() => {}}
/>

Icon Only

Segments can also be rendered with icons only.

Icon Only
<SegmentedControl
  shape="rounded"
  options={[
    { value: 'list', icon: <MenuOutline /> },
    { value: 'grid', icon: <AppsOutline /> },
    { value: 'calendar', icon: <CalendarOutline /> }
  ]}
  value="grid"
  onChange={() => {}}
/>

Shapes

Switch between pill (default) and rounded shapes.

Shapes
<SegmentedControl shape="pill" ... />
<SegmentedControl shape="rounded" ... />

Layout Modes

Control how segments are sized within the container.

Hug (Default)

Equal Width

Full Width

Layout Modes
<SegmentedControl layout="hug" ... />
<SegmentedControl layout="equal" ... />
<SegmentedControl layout="full" ... />

On this page

Preview
Component API
Variants
Label Only
Icon With Label
Icon Only
Shapes
Layout Modes
Photonix UI - React Components, Templates & Figma Design System