Docs
Switch
Switch
A control that allows the user to toggle between checked and not checked.
Loading...
Loading...
import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { SwitchDirective } from '~/components/ui/switch'
@Component({
standalone: true,
selector: 'switch-demo-new-york',
imports: [SwitchDirective, UbLabelDirective],
template: `
<div class="flex items-center space-x-2">
<button ubSwitch id="airplane-mode"></button>
<label for="airplane-mode" ubLabel>Airplane Mode</label>
</div>
`,
})
export class SwitchDemoNewYork { }import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { SwitchDirective } from '~/components/ui/switch'
@Component({
standalone: true,
selector: 'switch-demo-default',
imports: [SwitchDirective, UbLabelDirective],
template: `
<div class="flex items-center space-x-2">
<button ubSwitch id="airplane-mode"></button>
<label for="airplane-mode" ubLabel>Airplane Mode</label>
</div>
`,
})
export class SwitchDemoDefault { }Installation
pnpm dlx shadcn-ng@latest add switch
npx shadcn-ng@latest add switch
npx shadcn-ng@latest add switch
bunx --bun shadcn-ng@latest add switch
Copy and paste the following code into your project.
import { Component, computed, input } from '@angular/core'
import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
import { cn } from '~/lib/utils'
@Component({
standalone: true,
selector: 'button[ubSwitch]',
imports: [RdxSwitchThumbDirective],
hostDirectives: [
{
directive: RdxSwitchRootDirective,
inputs: ['id', 'required', 'checked', 'disabled'],
outputs: ['onCheckedChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span rdxSwitchThumb class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
`,
})
export class SwitchDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
})
}import { Component, computed, input } from '@angular/core'
import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
import { cn } from '~/lib/utils'
@Component({
standalone: true,
selector: 'button[ubSwitch]',
imports: [RdxSwitchThumbDirective],
hostDirectives: [
{
directive: RdxSwitchRootDirective,
inputs: ['id', 'required', 'checked', 'disabled'],
outputs: ['onCheckedChange'],
},
],
host: {
'[class]': 'computedClass()',
},
template: `
<span rdxSwitchThumb class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
`,
})
export class SwitchDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
})
}Update the import paths to match your project setup.
Usage
import { SwitchDirective } from '~/components/ui/switch.directive'<button ubSwitch />