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 {}
Use the size prop to control the size of the switch.
size
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 {}
Use the radius prop to assign a specific radius value.
radius
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 {}