Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
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.Set the default value in uncontrolled uses.
Whether or not to fill the available width.
Used to add name to segments for control. If empty, it will auto generate one.
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.A unique identifier for the segment, used to track the selection state.
Icon to display in the segment (SVGR import).
