SegmentedControl

A SegmentedControl-component is a hybrid somewhere between a button group, radio buttons, and tabs. Most commonly used for switching between two equal options or views, one always being the active choice.

The Casper UI SegmentedControl is built as a group of buttons, based on the Chakra UI SegmentedControl.

Base Example

To get started using the SegmentedControl component, provide a set of items and define what item is currently the active item (or “segment”) using the activeItemId-prop.

Keep track of the current active item by providing an onChange-handler.

import { SegmentedControl, type SegmentedControlItem } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [activeId, setActiveId] = useState("option-1");

  const onChange = (item: SegmentedControlItem) => {
    setActiveId(item.id);
  };

  return (
    <SegmentedControl
      activeItemId={activeId}
      onChange={onChange}
      items={[
        { id: "option-1", label: "Option One" },
        { id: "option-2", label: "Option Two" },
      ]}
    />
  );
}

⛶