Toggle Group

since 1.0

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

Example

Variant

Size

"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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

Variants

size

defaultsmlg

variant

defaultoutline

Toaster Toggle

On This Page

Example Install Components Props <ToggleGroup><ToggleGroupItem>Variants