v17

Switch

Components that control toggleable settings such as on/off, enabled/disabled, visible/hidden, etc.

Enable Automation
import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-basic-switch-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent],
  template: `
    <headwind-switch [(checked)]="enabled" class="inline-flex cursor-pointer select-none items-center space-x-2">
      <headwind-switch-track
        [class]="enabled ? 'bg-rose-500' : 'bg-zinc-200'"
        class="block h-5 w-8 rounded-full px-0.5"
      >
        <headwind-switch-thumb
          [class]="enabled ? 'translate-x-3' : 'translate-x-0'"
          class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
        ></headwind-switch-thumb>
      </headwind-switch-track>

      <div class="text-sm">Enable Automation</div>
    </headwind-switch>
  `,
})
export class BasicSwitchExampleComponent {
  enabled = true;
}

Switch Classes

Basic Classes

Each component used to implement Switch has the same class name as its name. You can set styles using the class name as a selector in a style file.

import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-switch-classes-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent],
  template: `
    <headwind-switch #headwindSwitch>
      <headwind-switch-track [class]="headwindSwitch.checked ? 'bg-rose-500' : 'bg-zinc-200'">
        <headwind-switch-thumb
          [class]="headwindSwitch.checked ? 'translate-x-3' : 'translate-x-0'"
        ></headwind-switch-thumb>
      </headwind-switch-track>
    </headwind-switch>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-switch {
          @apply inline-flex cursor-pointer select-none items-center space-x-2;
        }

        .headwind-switch-track {
          @apply block h-5 w-8 rounded-full px-0.5;
        }

        .headwind-switch-thumb {
          @apply block h-4 w-4 translate-y-0.5 rounded-full bg-white transition;
        }
      }
    `,
  ],
})
export class SwitchClassesExampleComponent {}

Checked Class

When a Switch is checked, the <headwind-switch> component has the class .headwind-checked.

import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-switch-checked-class-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent],
  template: `
    <headwind-switch>
      <headwind-switch-track>
        <headwind-switch-thumb></headwind-switch-thumb>
      </headwind-switch-track>
    </headwind-switch>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-switch {
          @apply inline-flex cursor-pointer select-none items-center space-x-2;

          &.headwind-checked {
            .headwind-switch-track {
              @apply bg-rose-500;
            }

            .headwind-switch-thumb {
              @apply translate-x-3;
            }
          }
        }

        .headwind-switch-track {
          @apply block h-5 w-8 rounded-full bg-zinc-200 px-0.5;
        }

        .headwind-switch-thumb {
          @apply block h-4 w-4 translate-x-0 translate-y-0.5 rounded-full bg-white transition;
        }
      }
    `,
  ],
})
export class SwitchCheckedClassExampleComponent {}

Checked State

You can use the checked attribute to toggle the checked state. When the checked state changes, the changed value is emitted through the checkedChange emitter.

import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-switch-checked-state-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent],
  template: `
    <headwind-switch #headwindSwitch checked class="inline-flex cursor-pointer select-none items-center space-x-2">
      <headwind-switch-track
        [class]="headwindSwitch.checked ? 'bg-rose-500' : 'bg-zinc-200'"
        class="block h-5 w-8 rounded-full px-0.5"
      >
        <headwind-switch-thumb
          [class]="headwindSwitch.checked ? 'translate-x-3' : 'translate-x-0'"
          class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
        ></headwind-switch-thumb>
      </headwind-switch-track>
    </headwind-switch>
  `,
})
export class SwitchCheckedStateExampleComponent {}

toggle, check, uncheck

The <headwind-switch> component provides the toggle(), check(), and uncheck() methods.

import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-switch-methods-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent],
  template: `
    <div class="flex w-full max-w-[400px] flex-col items-center space-y-2">
      <div class="flex flex-wrap items-stretch gap-2">
        <button
          (click)="headwindSwitch.toggle()"
          type="button"
          class="min-h-10 flex-[1_1_0] rounded-md bg-rose-500 px-3 text-sm text-white"
        >
          Toggle
        </button>

        <button
          (click)="headwindSwitch.check()"
          type="button"
          class="min-h-10 flex-[1_1_0] rounded-md bg-rose-500 px-3 text-sm text-white"
        >
          Check
        </button>

        <button
          (click)="headwindSwitch.uncheck()"
          type="button"
          class="min-h-10 flex-[1_1_0] rounded-md bg-rose-500 px-3 text-sm text-white"
        >
          Uncheck
        </button>
      </div>

      <headwind-switch #headwindSwitch class="inline-flex cursor-pointer select-none items-center space-x-2">
        <headwind-switch-track
          [class]="headwindSwitch.checked ? 'bg-rose-500' : 'bg-zinc-200'"
          class="block h-5 w-8 rounded-full px-0.5"
        >
          <headwind-switch-thumb
            [class]="headwindSwitch.checked ? 'translate-x-3' : 'translate-x-0'"
            class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
          ></headwind-switch-thumb>
        </headwind-switch-track>
      </headwind-switch>
    </div>
  `,
})
export class SwitchMethodsExampleComponent {}

NgModel, FormControl

The <headwind-switch> component can bind value using NgModel or FormControl.

true
true 
import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-switch-model-binding-example',
  standalone: true,
  imports: [
    HeadwindSwitchComponent,
    HeadwindSwitchTrackComponent,
    HeadwindSwitchThumbComponent,
    FormsModule,
    ReactiveFormsModule,
  ],
  template: `
    <div class="flex flex-col items-center gap-2">
      <headwind-switch [(ngModel)]="value" class="inline-flex cursor-pointer select-none items-center space-x-2">
        <headwind-switch-track
          [class]="value ? 'bg-rose-500' : 'bg-zinc-200'"
          class="block h-5 w-8 rounded-full px-0.5"
        >
          <headwind-switch-thumb
            [class]="value ? 'translate-x-3' : 'translate-x-0'"
            class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
          ></headwind-switch-thumb>
        </headwind-switch-track>

        <div class="text-sm">
          {{ value }}
        </div>
      </headwind-switch>

      <headwind-switch
        [formControl]="formControl"
        class="inline-flex cursor-pointer select-none items-center space-x-2"
      >
        <headwind-switch-track
          [class]="formControl.value ? 'bg-rose-500' : 'bg-zinc-200'"
          class="block h-5 w-8 rounded-full px-0.5"
        >
          <headwind-switch-thumb
            [class]="formControl.value ? 'translate-x-3' : 'translate-x-0'"
            class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
          ></headwind-switch-thumb>
        </headwind-switch-track>

        <div class="text-sm">
          {{ formControl.value }}
        </div>
      </headwind-switch>
    </div>
  `,
})
export class SwitchModelBindingExampleComponent {
  value = true;
  formControl = new FormControl(true);
}

Disabled State

Setting the disabled attribute will disable the switch. Styling for the disabled state uses the [disabled] CSS selector instead of :disabled.

import { Component } from '@angular/core';
import {
  HeadwindSwitchComponent,
  HeadwindSwitchThumbComponent,
  HeadwindSwitchTrackComponent,
} from '@favian/headwind-ui';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-switch-disabled-state-example',
  standalone: true,
  imports: [HeadwindSwitchComponent, HeadwindSwitchTrackComponent, HeadwindSwitchThumbComponent, JsonPipe],
  template: `
    <div class="flex flex-col items-center space-y-2">
      <headwind-switch #headwindSwitch1 disabled class="inline-flex cursor-pointer select-none items-center space-x-2">
        <headwind-switch-track
          [class]="headwindSwitch1.checked ? 'bg-rose-500' : 'bg-zinc-200'"
          class="block h-5 w-8 rounded-full px-0.5"
        >
          <headwind-switch-thumb
            [class]="headwindSwitch1.checked ? 'translate-x-3' : 'translate-x-0'"
            class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
          ></headwind-switch-thumb>
        </headwind-switch-track>
      </headwind-switch>

      <headwind-switch
        #headwindSwitch2
        checked
        disabled
        class="inline-flex cursor-pointer select-none items-center space-x-2"
      >
        <headwind-switch-track
          [class]="headwindSwitch2.checked ? 'bg-rose-500' : 'bg-zinc-200'"
          class="block h-5 w-8 rounded-full px-0.5"
        >
          <headwind-switch-thumb
            [class]="headwindSwitch2.checked ? 'translate-x-3' : 'translate-x-0'"
            class="block h-4 w-4 translate-y-0.5 rounded-full bg-white transition"
          ></headwind-switch-thumb>
        </headwind-switch-track>
      </headwind-switch>
    </div>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-switch[disabled] {
          .headwind-switch-track {
            @apply bg-zinc-300;
          }

          .headwind-switch-thumb {
            @apply bg-zinc-200;
          }
        }
      }
    `,
  ],
})
export class SwitchDisabledStateExampleComponent {}

Accessibility

Mouse Interaction

Clicking on the <headwind-switch> element toggles its checked state.

Keyboard Interaction

Command Target Description
space <headwind-switch> Toggle the checked state.

API

HeadwindSwitchComponent

The root component of Switch.

Selector

<headwind-switch>

Host Class

.headwind-switch<br/> .headwind-checked when Switch checked.

Inputs

Name Description
@Input() set checked(value: boolean) Set the checked state of Switch.
@Input() set disabled(value: boolean) Set the disabled state of Switch.

Outputs

Name Description
@Output() checkedChange: EventEmitter&lt;boolean&gt;() Emits the changed checked state of Switch.

Methods

Name Description
toggle() Toggle the checked state of Switch.
check() Check the switch. If it is already checked, it is ignored.
uncheck() Uncheck the switch. If it is already unchecked, it is ignored.

HeadwindSwitchTrackComponent

Component for a track on which the thumb can move.

Selector

&lt;headwind-switch-track&gt;

Host Class

.headwind-switch-track

HeadwindSwitchThumbComponent

A thumb component that represents the state of the switch.

Selector

&lt;headwind-switch-thumb&gt;

Host Class

.headwind-switch-thumb