Toggle Group

Segmented control for one or more labeled options in a shared track.

Introduction

Toggle Group is a segmented control for choosing one or more labeled options in a shared track. Single selection is the default; set multiple for multi-select. Compose with ToggleItem.

When to use: View switches, filter chips in a track, and short exclusive choices that should feel like one control. Prefer Switch for a single on/off setting, Radio for form-submitted exclusive options, and Tabs when each choice reveals a panel of content. Use ButtonGroup for grouped actions that do not select a value.

Use the framework selector in the site header to switch between React and Vue.

Import

import { ToggleGroup } from "@bridge-ui/vue/Components/ToggleGroup";
import { ToggleItem } from "@bridge-ui/vue/Components/ToggleItem";

import { ToggleGroup } from "@bridge-ui/react/Components/ToggleGroup";
import { ToggleItem } from "@bridge-ui/react/Components/ToggleItem";

Basic usage

Nest ToggleItem children inside ToggleGroup. Control selection with value / onChange (React) or v-model (Vue). For uncontrolled usage in React, use defaultValue.

Multiple selection

Set multiple so the value is a string[]. Segments use pressed-button semantics instead of a radiogroup.

Icons

Pass startIcon on a segment. Icon-only items need an accessible name via aria-label.

Variants

solid (default) uses a soft semantic fill on the selected segment. outline keeps a quieter ring accent.

Colors

Use color for the selected accent: primary, secondary, success, info, warning, error, dark, and black. Inactive segments stay on the dark palette.

Sizes

Change density with size: sm, md (default), and lg.

Full width

Set full to stretch the track to the container and grow each segment equally.

Orientation

Use orientation="vertical" for a column track. Arrow keys follow the orientation (left/right vs up/down).

Related components

Button, ButtonGroup, Radio, Switch, Tabs

Accessibility

• Exclusive mode renders role="radiogroup" with role="radio" segments and aria-checked
• Multiple mode renders role="group" with role="button" segments and aria-pressed
• Provide an accessible name on the group (aria-label or aria-labelledby)
• Icon-only segments need their own aria-label
• Arrow keys move focus (and select in exclusive mode); Home / End jump to the first or last enabled segment
• Roving tabIndex keeps one tab stop in the group
• disabled on the group or an item sets the native disabled state on segments

Anatomy

<div role="radiogroup|group"> <!-- ToggleGroup root / track -->
  <button role="radio|button"> <!-- ToggleItem -->
    <!-- startIcon -->
    <!-- label -->
  </button>
</div>

Target ToggleGroup with classes.root. Target ToggleItem with classes.root and classes.startIcon.

API

ToggleGroup

ToggleItem