Static UIStatic UI Docs
HomeComponentsBlocksTemplatesThemesShowcaseStorybookGitHub

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Navigation

ToggleTooltip

Component Info

CategoryActions
StatusStable
FrameworkReact

Package

@static-ui/ui

Contribute

  • Report an issue
  • GitHubRequest a feature
  • Edit this page

Resources

  • Storybook
  • GitHub
  • Documentation
  1. Docs
  2. Components
  3. Toggle Group

Toggle Group

Actions

A group of toggle buttons that allow single or multiple selection among related options.

Loading component...

Installation

Run the following command to add this component to your project:

$pnpm dlx static-ui add toggle-group

Import

Import the component directly from the package:

import { ToggleGroup } from "@static-ui/ui"

API Reference

Common props available for this component:

PropTypeDescription
type"single" | "multiple"Selection mode.
valuestring | string[]Controlled selected value(s).
onValueChange(value: any) => voidCallback when selection changes.
classNamestringAdditional CSS classes to apply.

Dependencies

  • @base-ui/react

Accessibility

Uses `role="group"` with `aria-label`. Each toggle button uses `aria-pressed`.

Related Components

ButtonAction-triggering interactive element.
ToggleOn/off state button.