🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Toggle Group

A set of two-state buttons that can be toggled on or off, functioning as a group.

Toggle groups allow users to control multiple related toggle buttons that share a common context, such as text formatting options in an editor or view mode selections. The group can operate in two modes: single (only one item can be pressed at a time, like radio buttons) or multiple (any number of items can be pressed simultaneously). Toggle groups provide consistent styling and behavior across all items while managing their collective state.

Built on top of Radix UI's ToggleGroup primitive with full keyboard navigation (Tab to move between items, Arrow keys for single mode navigation, Space/Enter to toggle), focus management, and accessibility support including proper ARIA attributes and roving tabindex.

Example

"use client"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@strongtie/design-system/toggle-group"
import {
  MdFormatBold,
  MdFormatItalic,
  MdFormatUnderlined,
} from "react-icons/md"

export function ToggleGroupDefault() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <MdFormatBold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <MdFormatItalic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <MdFormatUnderlined className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Installation


npm install @strongtie/design-system

import { ToggleGroup } from "@strongtie/design-system/toggle-group"

Components

This module exports the following components:

ToggleGroup
ToggleGroupItem

Props

`<ToggleGroup>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`'default'`	The size of the toggle button.
`variant`	`"default" \| "outline" \| null`	`'default'`	The visual style variant of the toggle.

`<ToggleGroupItem>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`'default'`	The size of the toggle button.
`variant`	`"default" \| "outline" \| null`	`'default'`	The visual style variant of the toggle.

Example

"use client"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@strongtie/design-system/toggle-group"
import {
  MdFormatBold,
  MdFormatItalic,
  MdFormatUnderlined,
} from "react-icons/md"

export function ToggleGroupDefault() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <MdFormatBold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <MdFormatItalic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <MdFormatUnderlined className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

toggle-group

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI toggle-group Documentation

Toaster Toggle

On This Page

Example Installation Components Props <ToggleGroup><ToggleGroupItem>Example Styling Additional Classes Accessibility Resources

Contribute

Toggle Group

A set of two-state buttons that can be toggled on or off, functioning as a group.

Example

"use client"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@strongtie/design-system/toggle-group"
import {
  MdFormatBold,
  MdFormatItalic,
  MdFormatUnderlined,
} from "react-icons/md"

export function ToggleGroupDefault() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <MdFormatBold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <MdFormatItalic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <MdFormatUnderlined className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Installation


npm install @strongtie/design-system

import { ToggleGroup } from "@strongtie/design-system/toggle-group"

Components

This module exports the following components:

ToggleGroup
ToggleGroupItem

Props

`<ToggleGroup>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`'default'`	The size of the toggle button.
`variant`	`"default" \| "outline" \| null`	`'default'`	The visual style variant of the toggle.

`<ToggleGroupItem>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`'default'`	The size of the toggle button.
`variant`	`"default" \| "outline" \| null`	`'default'`	The visual style variant of the toggle.

Example

"use client"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@strongtie/design-system/toggle-group"
import {
  MdFormatBold,
  MdFormatItalic,
  MdFormatUnderlined,
} from "react-icons/md"

export function ToggleGroupDefault() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <MdFormatBold className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <MdFormatItalic className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <MdFormatUnderlined className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

toggle-group

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI toggle-group Documentation

Toaster Toggle

On This Page

Example Installation Components Props <ToggleGroup><ToggleGroupItem>Example Styling Additional Classes Accessibility Resources

Contribute