Switch

Docs

Switch

A control that allows the user to toggle between checked and not checked.

Preview

Code

import { UbLabelDirective } from '@/components/ui/label'

import { SwitchDirective } from '@/components/ui/switch'
import { Component } from '@angular/core'

@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">Airplane Mode</label>
    </div>
    `,
})
export class SwitchDemoNewYork { }

import { UbLabelDirective } from '@/components/ui/label'

import { SwitchDirective } from '@/components/ui/switch'
import { Component } from '@angular/core'

@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">Airplane Mode</label>
    </div>
    `,
})
export class SwitchDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add switch

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'
import { Component, computed, input } from '@angular/core'

import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'

@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())
  })
}

import { cn } from '@/lib/utils'
import { Component, computed, input } from '@angular/core'

import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'

@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())
  })
}

Update the import paths to match your project setup.

Usage

import { SwitchDirective } from '@/components/ui/switch.directive'

<button ubSwitch />

Skeleton Table