Skip to main content

​
Segmented Control

A compact control for switching between mutually exclusive views or options.

​
Import

import { SegmentedControl } from "@soft-ui/react/segmented-control"

​
Anatomy

<SegmentedControl.Root size="m" variant="default">
  <SegmentedControl.List>
    <SegmentedControl.Item value="option1" leadingIcon={<Icon />}>
      Option 1
    </SegmentedControl.Item>
    <SegmentedControl.Item value="option2">Option 2</SegmentedControl.Item>
    <SegmentedControl.Indicator />
  </SegmentedControl.List>
  <SegmentedControl.Content value="option1">Content 1</SegmentedControl.Content>
  <SegmentedControl.Content value="option2">Content 2</SegmentedControl.Content>
</SegmentedControl.Root>

​
SegmentedControl.Root

The root container for the segmented control.
​
size
'xs' | 's' | 'm'
default:"'m'"
Size of the segmented control
​
variant
'default' | 'filled' | 'outline'
default:"'default'"
Visual style variant
  • default: Standard background with shadow
  • filled: Semi-transparent filled background with backdrop blur
  • outline: Border outline with transparent background
​
defaultValue
string
The value of the item that should be active by default
​
value
string
The controlled value of the active item
​
onValueChange
(value: string) => void
Callback fired when the active item changes
​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
The orientation of the control
​
activationMode
'automatic' | 'manual'
default:"'automatic'"
Whether items are activated automatically on focus or require explicit activation
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides

​
Data Attributes

  • data-slot="segmented-control"
  • data-size: Current size (xs, s, m)
  • data-variant: Current variant (default, filled, outline)

​
SegmentedControl.List

Container for the segmented control items and indicator.
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides

​
Data Attributes

  • data-slot="segmented-control-list"

​
SegmentedControl.Item

An individual option within the segmented control.
​
value
string
required
Unique identifier for this item
​
leadingIcon
React.ReactNode
Icon displayed before the item label
​
disabled
boolean
default:"false"
Whether the item is disabled
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides

​
Data Attributes

  • data-slot="segmented-control-item"
  • data-active: Present when the item is active
  • data-disabled: Present when the item is disabled

​
SegmentedControl.Indicator

Visual indicator showing the active item.
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides

​
Data Attributes

  • data-slot="segmented-control-indicator"

​
SegmentedControl.Content

Container for the content of a segmented control panel.
​
value
string
required
The value of the item that this content is associated with
​
unsafeClassName
string
Explicit escape hatch for intentional structural overrides

​
Data Attributes

  • data-slot="segmented-control-content"

​
Examples

​
Basic Segmented Control

<SegmentedControl.Root defaultValue="list">
  <SegmentedControl.List>
    <SegmentedControl.Item value="list">List</SegmentedControl.Item>
    <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
    <SegmentedControl.Item value="table">Table</SegmentedControl.Item>
    <SegmentedControl.Indicator />
  </SegmentedControl.List>
</SegmentedControl.Root>

​
With Icons

<SegmentedControl.Root variant="filled" size="s" defaultValue="month">
  <SegmentedControl.List>
    <SegmentedControl.Item value="day" leadingIcon={<CalendarIcon />}>
      Day
    </SegmentedControl.Item>
    <SegmentedControl.Item value="week" leadingIcon={<CalendarIcon />}>
      Week
    </SegmentedControl.Item>
    <SegmentedControl.Item value="month" leadingIcon={<CalendarIcon />}>
      Month
    </SegmentedControl.Item>
    <SegmentedControl.Indicator />
  </SegmentedControl.List>
</SegmentedControl.Root>

​
Controlled

const [view, setView] = React.useState("preview")

return (
  <SegmentedControl.Root value={view} onValueChange={setView}>
    <SegmentedControl.List>
      <SegmentedControl.Item value="edit">Edit</SegmentedControl.Item>
      <SegmentedControl.Item value="preview">Preview</SegmentedControl.Item>
      <SegmentedControl.Indicator />
    </SegmentedControl.List>
  </SegmentedControl.Root>
)

Build docs developers (and LLMs) love

Get started for freeTalk to us