Docs
toggle-group

toggle group

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

DocsAPI Reference

Installation

npx duck-ui@latest add toggle-group
npx duck-ui@latest add toggle-group

Usage

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

Examples

Default

Outline

Single

Small

Large

Disabled

API Reference

ToggleGroup Properties

  • variant ('default' | 'outline', optional):
    Defines the visual style of the toggle group items.

    • default (default): Transparent background.
    • outline: Bordered style with hover effects.

  • size ('default' | 'sm' | 'lg', optional):
    Sets the size of the toggle group items.

    • default (default): Medium-sized items.
    • sm: Small items with reduced height and padding.
    • lg: Large items with increased height and padding.

  • className (string, optional):
    Additional classes to apply custom styles to the group container.

  • children (React.ReactNode):
    Child elements, typically ToggleGroupItem components.

  • ...props (React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>):
    Additional props are forwarded to the underlying Radix ToggleGroupPrimitive.Root component.

ToggleGroupItem Properties

  • variant ('default' | 'outline', optional):
    Defines the visual style of the individual toggle item. Inherits from ToggleGroup if not specified.

  • size ('default' | 'sm' | 'lg', optional):
    Sets the size of the individual toggle item. Inherits from ToggleGroup if not specified.

  • className (string, optional):
    Additional classes to apply custom styles to the item.

  • children (React.ReactNode):
    Content inside the toggle item.

  • ...props (React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>):
    Additional props are forwarded to the underlying Radix ToggleGroupPrimitive.Item component.

Context-Based Inheritance

The ToggleGroup component uses React context to pass the variant and size properties to its children (ToggleGroupItem). This ensures consistent styles across all items in the group unless overridden at the item level.

Type Definitions

ToggleGroupVariantProps

Defines the types for the variant and size properties.

ToggleTooltip