saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Toggle Group

Toggle Group

A set of two-state buttons that can be toggled on or off.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/toggle-group

Usage

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group"
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Loading...
Outline variant.

Sizes

Loading...
Size variants.

API Reference

PropTypeDefaultDescription
type*"single" | "multiple"—Whether single or multiple items can be pressed.
valuestring | string[]—The controlled value.
onValueChange(value: string | string[]) => void—Event handler for value changes.

On This Page

  • Installation
  • Usage
  • Examples
  • Outline
  • Sizes
  • API Reference