Segmented Controls

Overview

Segmented Controls present a developer-defined set of two or more mutually exclusive options in a single, connected control. They are commonly used to switch between views, filters, or modes where a dropdown would be excessive.

Each option supports a prefix icon, a required text label, and an optional suffix slot. The currently selected option is highlighted using the primary button colour.

Usage

Import the component:

import { SegmentedControls } from "@eqtylab/equality";

options, value, and onValueChange are required. value and onValueChange should be controlled by the parent component.

const [view, setView] = useState("day");

<SegmentedControls
  value={view}
  onValueChange={setView}
  options={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
/>;

Examples

Text only

With prefix icons

Provide an icon (a Lucide icon name or a React element) to render a prefix before the label.

With a suffix slot

Use the suffix slot to render supplementary content, such as a count Badge, after the label.

Display modes

Like the Badge component, the display prop controls what is rendered inside each segment: both (the default), text-only, or icon-only.

icon-only requires every option to define an icon, and it falls back to both if any option is missing one. Because label is mandatory, it is used as the accessible label (aria-label) and tooltip for each segment in icon-only mode.

Icon only

<SegmentedControls
  display="icon-only"
  value={view}
  onValueChange={setView}
  options={[
    { value: "grid", label: "Table view", icon: "Grid3X3" },
    { value: "list", label: "List view", icon: "List" },
  ]}
/>

Props

SegmentedControlOption