AI Segmented Control

Like Radio Buttons or Tabs, Segmented Controls are used to switch between different options or views. The AI Segmented Control, also known as a “Snacktion”, offers the user the ability to toggle through various AI suggestions.

Overview

Props

AiSegmentedControl.Root

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or multiple items can be selected.
`value`	`string \| string[]`	—	Controlled selected value(s). Use with `onValueChange`.
`defaultValue`	`string \| string[]`	—	Uncontrolled default selected value(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Callback when selection changes.
`disabled`	`boolean`	`false`	Disables all items.
`rovingFocus`	`boolean`	`true`	Enables keyboard roving focus.
`dir`	`'ltr' \| 'rtl'`	—	Layout direction.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation of the group.

AiSegmentedControl.Item

Prop	Type	Default	Description
`value`	`string`	—	Required. Value for this item when selected.
`disabled`	`boolean`	`false`	Disables this item.
`children`	`ReactNode`	—	Label/content shown next to the icon.

All other props are forwarded to the underlying Radix primitives (and thus support standard HTML/React attributes where applicable).

Resources

Install


yarn add @activecampaign/camp-components-ai

Import


import { AiSegmentedControl } from '@activecampaign/camp-components-ai'

Usage

Best practices

Use segmented controls to switch between contextual insights, not for performing actions.
When space is constrained, ensure the segmented control supports horizontal scrolling.
For ease of navigation, there should be no more than five segments per control.
Segmented controls should not trigger navigational changes that take the user out of context. Use tabs or navigation patterns for such use cases.
Avoid using additional icons in segmented controls unless the meaning is universally recognizable. Combine icons with labels to support clarity and accessibility.

Content guidelines

Segment labels should be clearly and consisely written, in sentence case and clear punctuation at the end. Avoid unneccessary or ambiguous words, but include articles like “a” and “the,” as they provide clarity especially in translating.

✅ DO

How did this campaign do?
Who is engaging with my campaign?
How could I improve this campaign?

🚫 DON’T

How Is This Campaign Doing?
Who engaged with my campaign
Improve this campaign

Accessibility

Keyboard support

Use tab to move focus into the segmented control group, only one segment should be focusable at a time
Use left arrow and right arrow keys to navigate between segments within the control
Use space or enter to select the focused segment and update the view or filter accordingly
The selected segment should have aria-checked="true" and all segments should use role="radio" within a radiogroup
Screen readers should announce the control as a single group, along with the current selection and available options