Toggle Group

A set of toggle buttons that share selection state, with single or multi-select.

Basic

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";
import { List, ListOrdered } from "lucide-react";

export default function BasicDemo() {
  return (
    <ToggleGroup magnitude="md" defaultValue={["bulleted"]} aria-label="List style">
      <Toggle value="bulleted" aria-label="Bulleted list" icon={<Icon icon={List} />} />
      <Toggle value="numbered" aria-label="Numbered list" icon={<Icon icon={ListOrdered} />} />
    </ToggleGroup>
  );
}

Multiple

Pass multiple to let more than one toggle stay pressed at once.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";
import { Bold, Italic, Underline } from "lucide-react";

export default function MultipleDemo() {
  return (
    <ToggleGroup
      magnitude="md"
      multiple
      defaultValue={["bold", "italic"]}
      aria-label="Text formatting"
    >
      <Toggle value="bold" aria-label="Bold" icon={<Icon icon={Bold} />} />
      <Toggle value="italic" aria-label="Italic" icon={<Icon icon={Italic} />} />
      <Toggle value="underline" aria-label="Underline" icon={<Icon icon={Underline} />} />
    </ToggleGroup>
  );
}

Magnitudes

The group’s magnitude sizes every Toggle inside it.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle, type ToggleMagnitude } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";
import { Bold, Italic, Underline } from "lucide-react";

const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      {MAGNITUDES.map((magnitude) => (
        <ToggleGroup
          key={magnitude}
          magnitude={magnitude}
          multiple
          defaultValue={["bold"]}
          aria-label={`Text formatting (${magnitude})`}
        >
          <Toggle value="bold" aria-label={`Bold (${magnitude})`} icon={<Icon icon={Bold} />} />
          <Toggle
            value="italic"
            aria-label={`Italic (${magnitude})`}
            icon={<Icon icon={Italic} />}
          />
          <Toggle
            value="underline"
            aria-label={`Underline (${magnitude})`}
            icon={<Icon icon={Underline} />}
          />
        </ToggleGroup>
      ))}
    </div>
  );
}

Disabled

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";
import { Bold, Italic, Underline } from "lucide-react";

export default function DisabledDemo() {
  return (
    <ToggleGroup
      magnitude="md"
      disabled
      defaultValue={["bold"]}
      aria-label="Text formatting (disabled)"
    >
      <Toggle value="bold" aria-label="Bold" icon={<Icon icon={Bold} />} />
      <Toggle value="italic" aria-label="Italic" icon={<Icon icon={Italic} />} />
      <Toggle value="underline" aria-label="Underline" icon={<Icon icon={Underline} />} />
    </ToggleGroup>
  );
}

Vertical

Set orientation="vertical" to stack the toggles.

Show code

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";

export default function VerticalDemo() {
  return (
    <ToggleGroup
      magnitude="md"
      orientation="vertical"
      defaultValue={["left"]}
      aria-label="Text alignment"
    >
      <Toggle value="left" aria-label="Align left" icon={<Icon icon={AlignLeft} />} />
      <Toggle value="center" aria-label="Align center" icon={<Icon icon={AlignCenter} />} />
      <Toggle value="right" aria-label="Align right" icon={<Icon icon={AlignRight} />} />
    </ToggleGroup>
  );
}

Installation

import { Icon } from "@makeplane/propel/components/icon";
import { Toggle } from "@makeplane/propel/components/toggle";
import { ToggleGroup } from "@makeplane/propel/components/toggle-group";

Props

ToggleGroup

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ToggleGroupState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude	"sm" \| "md" \| "lg"	Yes	Size applied to every `Toggle` in the group (each `Toggle` can still override it).

Toggle

Prop	Type	Required	Description
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ToggleState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude	"sm" \| "md" \| "lg"	No	Size override. Inside a `ToggleGroup` the group's `magnitude` is used (so you can omit it); standalone it defaults to `md`.
icon	ReactNode	Yes	Icon element rendered inside the toggle, usually `<Icon icon={...} />`.