Search the docs

Find a page or a component

Figma

Get started

Introduction Showcase Installation Figma sync Changelog

Foundations

Colors Typography Radius Surfaces Motion

Patterns

Agent rail Change card Metric card Funnel node A/B test Status pill

Actions

Button Button Group Toggle Toggle Group

Forms

Input Input Group Input OTP Textarea Field Label Select Native Select Combobox Checkbox Radio Group Switch Slider Calendar

Overlays

Dialog Alert Dialog Sheet Drawer Popover Hover Card Tooltip Dropdown Menu Context Menu Menubar Command Command Menu Toast

Navigation

Sidebar Navigation Menu Tabs Breadcrumb Pagination

Layout

Card Item Accordion Collapsible Separator Scroll Area Resizable Aspect Ratio Carousel Direction

Data display

Table Chart Avatar Badge Kbd

Feedback

Alert Empty Progress Skeleton Spinner

Chat and agents

Message Bubble Message Scroller Trace Attachment Code Block Questionnaire Marker

PreviousToggle Next Input

This system

Version1.0.0

FigmaIn sync

IconsCentral Icons

FontAspekta

Toggle Group

A row of toggles where one or several can be on.

ActionsOpen in Figma

Installation#

Terminal

npx shadcn@latest add @zellify/toggle-group

Usage#

toggle-group.tsx

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

Examples#

API reference#

Exports ToggleGroup ToggleGroupItem. Every part takes its element's usual props and a className.

Toggle Group

A row of toggles where one or several can be on.

ActionsOpen in Figma

Installation#

Terminal

npx shadcn@latest add @zellify/toggle-group

Usage#

toggle-group.tsx

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

Examples#

Basic

Outline

Outline With Icons

Sizes

With Spacing

With Icons

Filter

Date Range

Sort

With Input and Select

Vertical

Vertical Outline

Vertical Outline With Icons

Vertical With Spacing

Font Weight Selector

Font Weight

Use font-normal to set the font weight.