Segmented Control

For development, import SegmentedControl from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Segmented Control has three elements that work together to switch the presentation view of current or filtered content.

Selected segment
Icon
Label

Options

The Segmented Control supports multiple sizes, fill options, and icon configurations for different use cases.

Sizes

Fill

By default, Segmented Control will hug its content. But it can also fill available width.

Icons

Place icons before the segment’s text label, or use them to replace the text label as an icon-only segment. Use icon-only segments with Tooltip to provide an accessible label.

Behavior

The Segmented Control responds to user interaction with distinct visual states and selection behaviors.

Visual States

Default

Default segments do not have a focus-visible state because only the selected segment receives focus.

Selected

Selected segments do not have hover or active states because users cannot interact with them when selected.

Only one segment remains selected at all times
At least one segment remains selected at all times

Focused

Only the selected segment receives focus.

Usage Guidelines

Standard	Requirement
DoSwitch the presentation view	Use the Segmented Control when switching the presentation view of current or filtered content.
DoUse for 2-5 selections	Use Segmented Control for 2-5 selections. Currently it lacks native overflow handling, so test for mobile responsiveness when using this component.
DoToggle between presentation modes	Use Segmented Control to toggle between different presentation modes such as grid vs list.
DoFilter content	Use Segmented Control to filter data into segments, providing users with a smaller set of data to engage. Including a number helps indicate how many items are in each filtered segment.
DoSort content	Use Segmented Control to allow users to sort a list or display by different criteria (e.g., “Newest,” “Oldest,” “Most Popular,” “Alphabetical”). The core content remains the same, but its order changes.
DoSwitch data granularity or time ranges	Use Segmented Control to toggle between different temporal views of the same data or different interpretations of the same data. Another example includes switching between a percentage (%) or dollar amount ($).
DoToggle sub-categories	Use Segmented Control when a section has closely related, but distinct, sub-sections.
DoSelect an option in a form	Use Segmented Control for a small number of mutually exclusive choices within a form. It provides a visually appealing and efficient alternative to traditional radio buttons, especially when space is a concern.
Don’tUse for explicit-submission choices	Radios are form controls that users must explicitly submit; use Segmented Controls instead for selections that affect the UI immediately.
Don’tUse to show new content	Segmented Control changes the presentation format of displayed content or filters it; use Tabs instead to change the view and show new content.

Content

Use labels and icons to clearly communicate each segment option.

Keyboard Interaction

Users can navigate the Segmented Control using standard keyboard controls.

Key	Interaction
Arrow Right	While focused, selects the Segment on the right
Arrow Left	While focused, selects the Segment on the left

Accessibility

Icon-only segments require an accessible name via aria-label or aria-describedby.

For more guidance on form field labels and context, see input field context association best practices.

Code

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.

string

Set the default value in uncontrolled uses.

boolean

default:"false"

Whether or not to fill the available width.

string

default:"useId()"

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

(value: string) => void

string

Set the value in controlled uses.

"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.

string

required

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

Svg

Icon to display in the segment (SVGR import).

Concepts & Guidelines

Anvil2

Resources

Segmented Control - Web

Anatomy

Options

Sizes

Fill

Icons

Behavior

Visual States

Default

Selected

Focused

Usage Guidelines

Content

Keyboard Interaction

Accessibility

Code

Common Examples

SegmentedControl components

Tooltip Example

`SegmentedControl` Props

`SegmentedControl.Segment` Props

​Anatomy

​Options

​Sizes

​Fill

​Icons

​Behavior

​Visual States

​Default

​Selected

​Focused

​Usage Guidelines

​Content

​Keyboard Interaction

​Accessibility

​Code

​Common Examples

​SegmentedControl components

​Tooltip Example

​SegmentedControl Props

​SegmentedControl.Segment Props

Anatomy

Options

Sizes

Fill

Icons

Behavior

Visual States

Default

Selected

Focused

Usage Guidelines

Content

Keyboard Interaction

Accessibility

Code

Common Examples

SegmentedControl components

Tooltip Example

`SegmentedControl` Props

`SegmentedControl.Segment` Props