Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Toggle Group

Toggle Group

PreviousNext

A set of toggle buttons that allows users to select one or multiple options from a group.

Toggle groups provide a compact way to present a set of related options that can be toggled on or off. They support both single and multiple selection modes, making them versatile for various use cases like text formatting toolbars, filter controls, or settings panels.

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>

PropTypeDefaultDescription
size"default" | "sm" | "lg" | null-
spacingnumber-
variant"default" | "outline" | null-

<ToggleGroupItem>

PropTypeDefaultDescription
size"default" | "sm" | "lg" | null-
variant"default" | "outline" | null-

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.

Classes

CSS classes used by this component:

  • toggle-group
  • toggle-group-item

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

ToasterToggle

On This Page

ExampleInstallationComponentsProps<ToggleGroup><ToggleGroupItem>ExampleStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page