Segmented control

A SegmentedControl picks one value from a few options shown as joined buttons. Use it for time ranges, view switches and short filters.

Usage#

import { SegmentedControl } from "@clawscale/react";

<SegmentedControl options={[{ label: "24h", value: "24h" }, { label: "7d", value: "7d" }]} value={range} onValueChange={setRange} />

Each option takes a label and a value, plus an optional icon and disabled.

Examples#

Time range#

Pass value and onValueChange to control the selection, or defaultValue to leave it uncontrolled.

Error rate over the last 24h

core/segmented-control/basic.tsx

import { Classes, SegmentedControl } from "@clawscale/react";
import { useState } from "react";

const RANGES = [
  { label: "1h", value: "1h" },
  { label: "24h", value: "24h" },
  { label: "7d", value: "7d" },
  { label: "30d", value: "30d" },
  { label: "90d", value: "90d" },
];

export default function SegmentedControlBasic() {
  const [range, setRange] = useState("24h");
  return (
    <>
      <SegmentedControl options={RANGES} value={range} onValueChange={setRange} />
      <span className={Classes.TEXT_MUTED}>Error rate over the last {range}</span>
    </>
  );
}

Icons#

An option's icon renders before its label.

core/segmented-control/icons.tsx

import { SegmentedControl } from "@clawscale/react";

export default function SegmentedControlIcons() {
  return (
    <SegmentedControl
      defaultValue="table"
      options={[
        { icon: "th", label: "Table", value: "table" },
        { icon: "timeline-line-chart", label: "Chart", value: "chart" },
        { icon: "map", label: "Map", value: "map" },
      ]}
    />
  );
}

Intent#

intent="primary" fills the selected option with the primary color. Only none and primary are supported.

core/segmented-control/intent.tsx

import { SegmentedControl } from "@clawscale/react";

const STATUSES = [
  { label: "All runs", value: "all" },
  { label: "Failed", value: "failed" },
  { label: "Running", value: "running" },
  { label: "Queued", value: "queued" },
];

export default function SegmentedControlIntent() {
  return <SegmentedControl defaultValue="failed" intent="primary" options={STATUSES} />;
}

Fill#

fill stretches the control to its container and gives every option the same share.

core/segmented-control/fill.tsx

import { SegmentedControl } from "@clawscale/react";

const REGIONS = [
  { label: "All regions", value: "all" },
  { label: "eu-west-1", value: "eu-west-1" },
  { label: "us-east-1", value: "us-east-1" },
  { label: "ap-southeast-2", value: "ap-southeast-2" },
];

export default function SegmentedControlFill() {
  return <SegmentedControl defaultValue="all" fill options={REGIONS} />;
}

Size#

size accepts small, medium (default) and large.

core/segmented-control/size.tsx

import { SegmentedControl } from "@clawscale/react";

const RANGES = [
  { label: "24h", value: "24h" },
  { label: "7d", value: "7d" },
  { label: "30d", value: "30d" },
];

export default function SegmentedControlSize() {
  return (
    <>
      <SegmentedControl defaultValue="7d" options={RANGES} size="small" />
      <SegmentedControl defaultValue="7d" options={RANGES} size="medium" />
      <SegmentedControl defaultValue="7d" options={RANGES} size="large" />
    </>
  );
}

Interactive playground#

Props

DisabledFillInline

Intent

Size

View source on GitHub

Props interface#

interface SegmentedControlProps extends Props, ControlledValueProps<string>, React.RefAttributes<HTMLDivElement>@clawscale/react

SegmentedControl component props.

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`defaultValue`	`T` Initial value for uncontrolled usage. Mutually exclusive with `value` prop. Inherited from `ControlledValueProps`
`disabled`	`boolean` Whether this control should be disabled.
`fill`	`boolean` = `false` Whether the control should take up the full width of its container.
`inline`	`boolean` Whether the control should appear as an inline element.
`intent`	`SegmentedControlIntent` Visual intent to apply to the selected value.
`large`deprecated	`boolean` = `false` Whether this control should use large buttons. use `size="large"` instead.
`onValueChange`	`(value: T, targetElement: E \| null) => void` Callback invoked when the component value changes, typically via user interaction, in both controlled and uncontrolled mode. Inherited from `ControlledValueProps`
`options`required	`SegmentedControlOptionProps[]` List of available options.
`role`	`Extract<React.AriaRole, "radiogroup" \| "group" \| "toolbar" \| "menu">` = `'radiogroup'` Aria role for the overall component (container). Child buttons get appropriate roles: - "radiogroup" -> "radio" - "group" -> "button" - "toolbar" -> "button" - "menu" -> "menuitemradio"
`size`	`Size` = `"medium"` The size of the control.
`small`deprecated	`boolean` = `false` Whether this control should use small buttons. use `size="small"` instead.
`value`	`T` Controlled value. Mutually exclusive with `defaultValue` prop. Inherited from `ControlledValueProps`