Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Toggle Group

Copy Markdown

Toggle buttons for selecting a value.

DocsAPI

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

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

Anatomy#

ToggleGroup
└── ToggleGroupItem

Usage#

import { 
  ToggleGroup, 
  ToggleGroupItem 
} from "@/components/ui/toggle-group";

<ToggleGroup>
  <ToggleGroupItem value="1">Item 1</ToggleGroupItem>
  <ToggleGroupItem value="2">Item 2</ToggleGroupItem>
</ToggleGroup>

Controlled#

Use the value and onValueChange props to control the toggle group state programmatically.

PreviewCode

bold

States#

Disabled#

Disable the entire group with the disabled prop.

PreviewCode

With disabled toggle#

Disable individual toggles by setting disabled on a specific item.

PreviewCode

Orientation#

Use orientation to change the orientation of the toggle group.

Horizontal#

PreviewCode

Vertical#

PreviewCode

Variant#

Use variant to change the visual style of the toggle buttons.

Ghost#

PreviewCode

Outline#

PreviewCode

Examples#

With spacing#

Use spacing to add space between buttons.

PreviewCode

Single selection#

Use multiple={false} to allow only one toggle to be selected at a time.

PreviewCode

Custom toggle group#

A custom toggle group example with a custom styling for font weight selection.

PreviewCode

Font Weight AaLightAaNormalAaMediumAaBold

API Reference#

ToggleGroup#

Root component. Provides shared variant and size to child toggles via context.

ToggleGroupItem#

Single toggle in the group. Uses Toggle internally.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Toast ](/docs/components/toast)[

Next page

Toggle Tooltip ](/docs/components/toggle-tooltip)

On This Page

InstallationAnatomyUsageControlledStatesDisabledWith disabled toggleOrientationHorizontalVerticalVariantGhostOutlineExamplesWith spacingSingle selectionCustom toggle groupAPI ReferenceToggleGroupToggleGroupItem