Segmented Control React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SegmentedControl from "./SegmentedControl";

export default function Example() {
  return (
    <SegmentedControl
      items={[
        {
          "value": "day",
          "label": "Day"
        },
        {
          "value": "week",
          "label": "Week"
        },
        {
          "value": "month",
          "label": "Month"
        }
      ]}
      defaultValue={"week"}
      label={"Calendar view"}
      accentColor={"#e4d7ed"}
      background={"#28202f"}
    />
  );
}

Using Segmented Control

Use a small collection of mutually exclusive choices through items. Give the group a label that explains what is being selected.

Pair value with onValueChange for controlled selection, or use defaultValue for local state. Keep the option labels short enough to fit side by side.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { value, label, icon?, disabled? }. Use unique string values. Icons accept React nodes.
value	string	No	undefined	Optional controlled selected value.
defaultValue	string	No	undefined	Initial uncontrolled selection; otherwise the first enabled item is selected.
onValueChange	function	No	undefined	Called with the selected value.
label	string	No	"Choose an option"	Accessible label for the radio group.
accentColor	string	No	"#e4d7ed"	Selected surface colour.
background	string	No	"#211b27"	Track background colour.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.