Toggle Group

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

 import { Component } from '@angular/core';
 
import { RdxToggleGroupDirective, RdxToggleGroupItemDirective } from '@radix-ng/primitives/toggle-group';
import { AlignCenter, AlignLeft, AlignRight, LucideAngularModule } from 'lucide-angular';
 
@Component({
    selector: 'primitive-toggle-group-demo',
    standalone: true,
    imports: [
        RdxToggleGroupDirective,
        RdxToggleGroupItemDirective,
        LucideAngularModule
    ],
    template: `
        <div class="ToggleGroup" rdxToggleGroup value="center" aria-label="Text alignment">
            <button class="ToggleGroupItem" rdxToggleGroupItem value="left" aria-label="Left aligned">
                <lucide-icon [img]="AlignLeft" size="16" />
            </button>
            <button class="ToggleGroupItem" rdxToggleGroupItem value="center" aria-label="Center aligned">
                <lucide-icon [img]="AlignCenter" size="16" />
            </button>
            <button class="ToggleGroupItem" rdxToggleGroupItem value="right" aria-label="Right aligned">
                <lucide-icon [img]="AlignRight" name="align-right" size="16" />
            </button>
        </div>
    `,
    styleUrl: 'toggle-group-demo.css'
})
export class ToggleGroupDemoComponent {
    protected readonly AlignLeft = AlignLeft;
    protected readonly AlignCenter = AlignCenter;
    protected readonly AlignRight = AlignRight;
}

 :host {
    button {
        all: unset;
    }
}
 
.ToggleGroup {
    display: inline-flex;
    background-color: var(--mauve-6);
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--black-a7);
}
 
.ToggleGroupItem {
    background-color: white;
    color: var(--mauve-11);
    height: 35px;
    width: 35px;
    display: flex;
    font-size: 15px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
}
 
.ToggleGroupItem[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
 
.ToggleGroupItem:first-child {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
 
.ToggleGroupItem:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
 
.ToggleGroupItem:hover {
    background-color: var(--violet-3);
}
 
.ToggleGroupItem[data-state='on'] {
    background-color: var(--violet-5);
    color: var(--violet-11);
}
 
.ToggleGroupItem:focus {
    position: relative;
    box-shadow: 0 0 0 2px black;
}

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Support single and multiple pressed buttons.
Can be controlled or uncontrolled.

Import

Get started with importing the directives:

 import {
  RdxToggleGroupDirective,
  RdxToggleGroupItemDirective
} from '@radix-ng/primitives/toggle-group';

Anatomy

 <div rdxToggleGroup>
  <button rdxToggleGroupItem></button>
  <button rdxToggleGroupItem></button>
  <button rdxToggleGroupItem></button>
</div>

API Reference

Root

RdxToggleGroupDirective

Contains all the parts of a toggle group.

Prop	Default	Type
`value`	`—`	`ModelSignal<undefined \| string \| string[]>`
`type`	`—`	`InputSignal<"single" \| "multiple">`
`disabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether the toggle group is disabled.

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Item

RdxToggleGroupItemDirective

An item in the group.

Prop	Default	Type
`value`	`—`	`InputSignal<string>` The value of this toggle button.
`disabled`	`false`	`InputSignalWithTransform<boolean, BooleanInput>` Whether this toggle button is disabled.

Data Attribute	Value
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	`Present when disabled`
`[data-orientation]`	`"vertical" \| "horizontal"`

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to either the pressed item or the first item in the group.
`Space`	Activates/deactivates the item.
`Enter`	Activates/deactivates the item.
`ArrowDown`	Moves focus to the next item in the group.
`ArrowRight`	Moves focus to the next item in the group.
`ArrowUp`	Moves focus to the previous item in the group.
`ArrowLeft`	Moves focus to the previous item in the group.
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.