Switch

Toggle switch alternative to the checkbox.

 import { Component } from '@angular/core';
import { RdxThemeSwitchComponent } from '@radix-ng/components/switch';
import { RdxThemeDirective } from '@radix-ng/components/theme';
 
@Component({
    selector: 'switch-demo',
    standalone: true,
    imports: [RdxThemeSwitchComponent],
    hostDirectives: [RdxThemeDirective],
    template: `
        <rdx-theme-switch defaultChecked />
    `
})
export class SwitchComponent {}

API Reference

Examples

Size

Use the size prop to control the size of the switch.

 import { Component } from '@angular/core';
import { RdxThemeSwitchComponent } from '@radix-ng/components/switch';
import { RdxThemeDirective } from '@radix-ng/components/theme';
 
@Component({
    selector: 'switch-sizes-demo',
    standalone: true,
    imports: [RdxThemeDirective, RdxThemeSwitchComponent],
    hostDirectives: [RdxThemeDirective],
    template: `
        <div style="display: flex; align-items: center; gap: 8px;">
            <rdx-theme-switch size="1" defaultChecked />
            <rdx-theme-switch size="2" defaultChecked />
            <rdx-theme-switch size="3" defaultChecked />
        </div>
    `
})
export class SwitchSizedComponent {}

Radius

Use the radius prop to assign a specific radius value.

 import { Component } from '@angular/core';
import { RdxThemeSwitchComponent } from '@radix-ng/components/switch';
import { RdxThemeDirective } from '@radix-ng/components/theme';
 
@Component({
    selector: 'switch-radius-demo',
    standalone: true,
    imports: [RdxThemeDirective, RdxThemeSwitchComponent],
    hostDirectives: [RdxThemeDirective],
    template: `
        <div style="display: flex; align-items: center; gap: 8px;">
            <rdx-theme-switch radius="none" defaultChecked />
            <rdx-theme-switch radius="small" defaultChecked />
            <rdx-theme-switch radius="full" defaultChecked />
        </div>
    `
})
export class SwitchRadiusComponent {}