Photonix

SegmentedControl

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

Preview

Usage
"use client";

import { SegmentedControl } from '@photonix/ultimate';
import { useState } from 'react';

export default function SegmentedControlPreviewExample() {
    const [value, setValue] = useState('daily');

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

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
"use client";

import { SegmentedControl } from '@photonix/ultimate';

export default function SegmentedControlLabelOnlyExample() {
    return (
        <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
"use client";

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

export default function SegmentedControlIconWithLabelExample() {
    return (
        <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
"use client";

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

export default function SegmentedControlIconOnlyExample() {
    return (
        <SegmentedControl
            shape="rounded"
            options={[
                { value: 'list', icon: <MenuOutline /> },
                { value: 'grid', icon: <AppsOutline /> },
                { value: 'calendar', icon: <CalendarOutline /> },
            ]}
            value="grid"
            onChange={() => {}}
        />
    );
}

Shapes

Switch between pill and rounded shapes.

Shapes
"use client";

import { Flex, SegmentedControl } from '@photonix/ultimate';
import { useState } from 'react';

export default function SegmentedControlShapesExample() {
    const [shapeValue, setShapeValue] = useState('pill');

    return (
        <Flex direction="column" gap="md" align="start">
            <SegmentedControl
                shape="pill"
                options={[{ value: 'pill', label: 'Pill Shape' }, { value: 'opt2', label: 'Option' }]}
                value={shapeValue === 'pill' ? 'pill' : 'opt2'}
                onChange={(value) => setShapeValue(value === 'pill' ? 'pill' : 'rounded')}
            />
            <SegmentedControl
                shape="rounded"
                options={[{ value: 'rounded', label: 'Rounded Shape' }, { value: 'opt2', label: 'Option' }]}
                value={shapeValue === 'rounded' ? 'rounded' : 'opt2'}
                onChange={(value) => setShapeValue(value === 'rounded' ? 'rounded' : 'pill')}
            />
        </Flex>
    );
}

Layout Modes

Control how segments are sized within the container.

Hug (Default)

Equal Width

Full Width

Layout Modes
"use client";

import { Box, SegmentedControl, Text, Flex } from '@photonix/ultimate';

export default function SegmentedControlLayoutsExample() {
    return (
        <Flex direction="column" gap="md" w="100%">
            <Box>
                <Text variant="label-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>Hug (Default)</Text>
                <SegmentedControl
                    layout="hug"
                    options={[{ value: '1', label: 'Short' }, { value: '2', label: 'Much Longer Label' }]}
                    value="1"
                    onChange={() => {}}
                />
            </Box>
            <Box>
                <Text variant="label-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>Equal Width</Text>
                <SegmentedControl
                    layout="equal"
                    options={[{ value: '1', label: 'Short' }, { value: '2', label: 'Longer' }]}
                    value="1"
                    onChange={() => {}}
                />
            </Box>
            <Box>
                <Text variant="label-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>Full Width</Text>
                <SegmentedControl
                    layout="full"
                    options={[{ value: '1', label: 'Option A' }, { value: '2', label: 'Option B' }]}
                    value="1"
                    onChange={() => {}}
                />
            </Box>
        </Flex>
    );
}

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