Toggle Group

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

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

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup defaultValue={['bold']}>
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        Bold
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        Italic
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        Underline
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Install

Bash

npx @madeui/cli add toggle-group

Usage

TSX

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

Composition

TSX

<ToggleGroup>
  <ToggleGroupItem value="…" />
</ToggleGroup>

Joined

spacing="joined" fuses the items into one segmented control.

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

export default function ToggleGroupJoined() {
  return (
    <ToggleGroup variant="outline" spacing="joined" defaultValue={['center']}>
      <ToggleGroupItem value="left" aria-label="Align left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        Center
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Outline

import * as stylex from '@stylexjs/stylex';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { icon } from '@/lib/stylex-utils';

export default function ToggleGroupOutline() {
  return (
    <ToggleGroup variant="outline" defaultValue={['left']}>
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeft {...stylex.props(icon.md)} />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenter {...stylex.props(icon.md)} />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRight {...stylex.props(icon.md)} />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Sizes

import * as stylex from '@stylexjs/stylex';

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { space } from '@/lib/constants.stylex';

export default function ToggleGroupSizes() {
  return (
    <div {...stylex.props(styles.col)}>
      <ToggleGroup size="sm" variant="outline" defaultValue={['bold']}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          Bold
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          Italic
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="md" variant="outline" defaultValue={['bold']}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          Bold
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          Italic
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="lg" variant="outline" defaultValue={['bold']}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          Bold
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          Italic
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

const styles = stylex.create({
  col: {
    alignItems: 'flex-start',
    display: 'flex',
    flexDirection: 'column',
    gap: space.s3,
  },
});

Vertical

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

export default function ToggleGroupVertical() {
  return (
    <ToggleGroup
      orientation="vertical"
      variant="outline"
      spacing="joined"
      defaultValue={['center']}
    >
      <ToggleGroupItem value="top" aria-label="Align top">
        Top
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        Center
      </ToggleGroupItem>
      <ToggleGroupItem value="bottom" aria-label="Align bottom">
        Bottom
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Disabled

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

export default function ToggleGroupDisabled() {
  return (
    <ToggleGroup disabled variant="outline" defaultValue={['bold']}>
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        Bold
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        Italic
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        Underline
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Built on Base UI Toggle Group. The table below covers the props this library adds — every other prop (value, defaultValue, toggleMultiple, disabled, …) is forwarded; see the Base UI Toggle Group API reference.

ToggleGroup

Prop	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	Inherited by items.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Inherited by items.
`spacing`	`'gap' \| 'joined'`	`'gap'`	`joined` fuses items into a segmented control.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`style`	`StyleXStyles`	—	StyleX styles merged last — always win over the component’s own styles.

ToggleGroupItem

Accepts all Toggle props; variant and size default to the group’s values.