Toggle

A two-state button that can be either on or off.

 import { Component } from '@angular/core';
 
import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
import { Italic, LucideAngularModule } from 'lucide-angular';
 
@Component({
    selector: 'primitive-toggle-demo',
    standalone: true,
    imports: [
        RdxToggleDirective,
        LucideAngularModule
    ],
    template: `
        <button class="Toggle" rdxToggle aria-label="Toggle italic">
            <lucide-angular [img]="Italic" size="16" />
        </button>
    `,
    styleUrl: 'toggle-demo.css'
})
export class ToggleDemoComponent {
    protected readonly Italic = Italic;
}

 :host {
    button {
        all: unset;
    }
}
 
.Toggle {
    background-color: white;
    color: var(--mauve-11);
    height: 35px;
    width: 35px;
    border-radius: 4px;
    display: flex;
    font-size: 15px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px var(--black-a7);
}
 
.Toggle:hover {
    background-color: var(--violet-3);
}
 
.Toggle[disabled] {
    pointer-events: none;
    opacity: 0.5;
}
 
.Toggle[data-state='on'] {
    background-color: var(--violet-6);
    color: var(--violet-12);
}
 
.Toggle:focus {
    box-shadow: 0 0 0 2px black;
}

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Anatomy

 <button rdxToggle aria-label="Toggle italic">
  <icon />
</button>

API Reference

Root

RdxToggleDirective

The toggle.

Prop	Default	Type
`defaultPressed`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` The pressed state of the toggle when it is initially rendered. Use when you do not need to control its pressed state.
`pressed`	`—`	`ModelSignal<boolean>` The controlled pressed state of the toggle. Must be used in conjunction with `onPressedChange` .
`disabled`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` When true, prevents the user from interacting with the toggle.

Accessibility

Keyboard Interactions

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.