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

Toggle Group

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>`

Prop	Type	Default
`size`	`"default" \| "sm" \| "lg" \| null`	-
`spacing`	`number`	-
`variant`	`"default" \| "outline" \| null`	-

`<ToggleGroupItem>`

Prop	Type	Default	Description
`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.

Toaster Toggle

On This Page

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

Contribute

Toggle Group

A set of toggle buttons that allows users to select one or multiple options from 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>`

Prop	Type	Default
`size`	`"default" \| "sm" \| "lg" \| null`	-
`spacing`	`number`	-
`variant`	`"default" \| "outline" \| null`	-

`<ToggleGroupItem>`

Prop	Type	Default	Description
`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.

Toaster Toggle

On This Page

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

Contribute