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

npx shadcn@latest add @madeui/toggle-group

Usage

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

Composition

<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 { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

export default function ToggleGroupOutline() {
  return (
    <ToggleGroup variant="outline" defaultValue={['left']}>
      <ToggleGroupItem value="left" aria-label="Align left">
        <svg
          width="16"
          height="16"
          viewBox={`0 0 16 16`}
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden
        >
          <path d={`M2 4h12M2 8h8M2 12h10`} />
        </svg>
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <svg
          width="16"
          height="16"
          viewBox={`0 0 16 16`}
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden
        >
          <path d={`M2 4h12M4 8h8M3 12h10`} />
        </svg>
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <svg
          width="16"
          height="16"
          viewBox={`0 0 16 16`}
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden
        >
          <path d={`M2 4h12M6 8h8M4 12h10`} />
        </svg>
      </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.