SegmentedControl

A joined group of options where one is filled.

Overview

A mode or a range chosen in place: daily or weekly, split or even.

Mode

import { useState } from "react";
import { SegmentedControl } from "@hackcove/ui";

function Example() {
  const [value, setValue] = useState("week");
  return (
    <SegmentedControl
      label="Range"
      items={[
        { value: "day", label: "Daily" },
        { value: "week", label: "Weekly" },
        { value: "month", label: "Monthly" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

A mode or a range chosen in place: the caller owns value, and label names the group.

Don't

import { useState } from "react";
import { SegmentedControl } from "@hackcove/ui";

function Example() {
  const [value, setValue] = useState("on");
  return (
    <SegmentedControl
      label="Email me"
      items={[
        { value: "on", label: "On" },
        { value: "off", label: "Off" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

An on/off setting is a Checkbox, not a two-option SegmentedControl.

Disabled reason

import { useState } from "react";
import { SegmentedControl } from "@hackcove/ui";

function Example() {
  const [value, setValue] = useState("split");
  return (
    <SegmentedControl
      label="Split"
      items={[
        { value: "split", label: "Split" },
        { value: "even", label: "Even" },
        { value: "custom", label: "Custom", disabled: true, title: "Needs two or more people" },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

An option that cannot be chosen yet stays in the group with a title that says why.

Don't

import { useState } from "react";
import { SegmentedControl } from "@hackcove/ui";

function Example() {
  const [value, setValue] = useState("split");
  return (
    <SegmentedControl
      label="Split"
      items={[
        { value: "split", label: "Split" },
        { value: "even", label: "Even" },
        { value: "custom", label: "Custom", disabled: true },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

A disabled option with no title leaves the person guessing why it is greyed out.

Links

import { SegmentedControl } from "@hackcove/ui";

<SegmentedControl
  label="Journal"
  value="daily"
  items={[
    { value: "daily", label: "Daily", href: "#daily" },
    { value: "weekly", label: "Weekly", href: "#weekly" },
  ]}
/>

Options that go to another page are links: href on each, and value marks the current page.

API