Segmented Control

Implementation
SegmentedControl Props
SegmentedControl.Segment Props

Common Examples

import { useState } from "react";
import { SegmentedControl } from "@servicetitan/anvil2";
import MenuIcon from "@servicetitan/anvil2/assets/icons/material/round/menu.svg";

const ExampleComponent = () => {
  const [selected, setSelected] = useState("level 2");

  return (
    <Flex direction="column">
      <SegmentedControl selected={selected} onChange={setSelected}>
        <SegmentedControl.Segment value="level 1" icon={MenuIcon}>
          Level 1
        </SegmentedControl.Segment>
        <SegmentedControl.Segment value="level 2" icon={MenuIcon}>
          Level 2
        </SegmentedControl.Segment>
        <SegmentedControl.Segment value="level 3" icon={MenuIcon}>
          Level 3
        </SegmentedControl.Segment>
        <SegmentedControl.Segment value="level 4" icon={MenuIcon}>
          Level 4
        </SegmentedControl.Segment>
      </SegmentedControl>
    </Flex>
  );
};

SegmentedControl components

The Anvil2 segmented control is made up of a SegmentedControl component and multiple child SegmentedControl.Segment components. Similar to a group of radio inputs, each SegmentedControl.Segment will need a unique value string that will be passed into the SegmentedControl’s onChange function when it is selected.The SegmentedControl.Segment components can be wrapped in the Anvil2 Tooltip.Trigger component to display a tooltip on focus and hover. This is required for accessibility when only using an icon.

import { SegmentedControl } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<SegmentedControl
  selected="level-1"
  onChange={(value) => console.log(value)}
  size="medium"
  fill={false}
>
  <SegmentedControl.Segment value="level-1">Level 1</SegmentedControl.Segment>
</SegmentedControl>
); }

`SegmentedControl` Props

In addition to the props listed below, the SegmentedControl component can accept any valid HTML div props.

defaultSelected

string

Set the default value in uncontrolled uses.

fill

boolean

default:"false"

Whether or not to fill the available width.

name

string

default:"useId()"

Used to add name to segments for control. If empty, it will auto generate one.

onChange

(value: string) => void

selected

string

Set the value in controlled uses.

size

"small" | "medium"

default:"medium"

Size of the segmented control.

import { SegmentedControl } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <SegmentedControl.Segment value="segment-1" icon={MenuIcon}>
      Segment Label
    </SegmentedControl.Segment>
  );
}

`SegmentedControl.Segment` Props

In addition to the props listed below, the SegmentedControl.Segment component can accept any valid HTML label props.

value

string

required

A unique identifier for the segment, used to track the selection state.

icon

Svg

Icon to display in the segment (SVGR import).

Segmented Control – Code

Common Examples

SegmentedControl components

Tooltip Example

`SegmentedControl` Props

`SegmentedControl.Segment` Props

​Common Examples

​SegmentedControl components

​Tooltip Example

​SegmentedControl Props

​SegmentedControl.Segment Props

Common Examples

SegmentedControl components

Tooltip Example

`SegmentedControl` Props

`SegmentedControl.Segment` Props