Cephalopod

Segmented Control

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

Example

Selected: daily

Full Width

Usage

Code Example
import { SegmentedControl } from "cephalopod-design-system"

const options = [
  { label: "Daily", value: "daily" },
  { label: "Weekly", value: "weekly" },
]

<SegmentedControl
  type="single"
  options={options}
  value={value}
  onValueChange={setValue}
/>