v17

Checkbox

Component that toggles boolean state.

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-basic-checkbox-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <headwind-checkbox #checkbox class="inline-flex cursor-pointer select-none items-center space-x-1">
      <headwind-checkbox-button
        [class]="checkbox.checked ? 'border-rose-500 bg-rose-500' : 'bg-white'"
        class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300"
      >
        <ng-template headwindCheckboxChecked>
          <svg
            [@scaleUp]
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="absolute h-4 w-4 stroke-white"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </ng-template>
      </headwind-checkbox-button>

      <label class="cursor-pointer select-none text-sm"> I like Headwind UI </label>
    </headwind-checkbox>
  `,
  animations: [
    trigger('scaleUp', [
      state(
        'void',
        style({
          transform: 'scale(0)',
        }),
      ),
      transition(
        'void => *',
        animate(
          '.1s',
          style({
            transform: 'scale(1)',
          }),
        ),
      ),
      transition('* => void', animate('.1s')),
    ]),
  ],
})
export class BasicCheckboxExampleComponent {}

Checkbox Classes

Basic Classes

Each component used to implement Checkbox 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 {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-checkbox-classes-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <headwind-checkbox>
      <headwind-checkbox-button>
        <ng-template headwindCheckboxChecked>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="absolute h-4 w-4 stroke-rose-500"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </ng-template>
      </headwind-checkbox-button>
    </headwind-checkbox>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-checkbox {
          @apply inline-block cursor-pointer select-none;
        }

        .headwind-checkbox-button {
          @apply relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white;
        }
      }
    `,
  ],
})
export class CheckboxClassesExampleComponent {}

Checked Class

When a Checkbox is checked, the <headwind-checkbox> component has the class .headwind-checked.

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-checkbox-checked-class-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <headwind-checkbox>
      <headwind-checkbox-button>
        <ng-template headwindCheckboxChecked>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="absolute h-4 w-4 stroke-white"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </ng-template>
      </headwind-checkbox-button>
    </headwind-checkbox>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-checkbox {
          @apply inline-block cursor-pointer select-none;

          &.headwind-checked {
            .headwind-checkbox-button {
              @apply border-rose-500 bg-rose-500;
            }
          }
        }

        .headwind-checkbox-button {
          @apply relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white;
        }
      }
    `,
  ],
})
export class CheckboxCheckedClassExampleComponent {}

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 {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-checkbox-checked-state-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <headwind-checkbox [(checked)]="checked" class="inline-flex cursor-pointer select-none items-center space-x-1">
      <headwind-checkbox-button
        [class]="checked ? 'border-rose-500 bg-rose-500' : 'bg-white'"
        class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300"
      >
        <ng-template headwindCheckboxChecked>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="absolute h-4 w-4 stroke-white"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </ng-template>
      </headwind-checkbox-button>
    </headwind-checkbox>
  `,
})
export class CheckboxCheckedStateExampleComponent {
  checked = true;
}

toggle, check, uncheck

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

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-checkbox-methods-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <div class="w-full max-w-[200px]">
      <div class="flex flex-col items-stretch gap-2">
        <button (click)="checkbox.toggle()" class="h-8 rounded-md bg-rose-500 px-3 text-sm text-white">
          Toggle Checkbox
        </button>
        <button (click)="checkbox.check()" class="h-8 rounded-md bg-rose-500 px-3 text-sm text-white">
          Check Checkbox
        </button>
        <button (click)="checkbox.uncheck()" class="h-8 rounded-md bg-rose-500 px-3 text-sm text-white">
          Uncheck Checkbox
        </button>

        <div class="flex justify-center">
          <headwind-checkbox #checkbox class="inline-flex cursor-pointer select-none items-center space-x-1">
            <headwind-checkbox-button
              class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
            >
              <ng-template headwindCheckboxChecked>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="absolute h-4 w-4 stroke-rose-500"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                </svg>
              </ng-template>
            </headwind-checkbox-button>
          </headwind-checkbox>
        </div>
      </div>
    </div>
  `,
})
export class CheckboxMethodsExampleComponent {}

NgModel, FormControl

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

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-checkbox-model-binding-example',
  standalone: true,
  imports: [
    HeadwindCheckboxComponent,
    HeadwindCheckboxButtonComponent,
    HeadwindCheckboxCheckedDirective,
    FormsModule,
    ReactiveFormsModule,
  ],
  template: `
    <div class="flex flex-col items-stretch gap-2">
      <headwind-checkbox [(ngModel)]="checked" class="inline-flex cursor-pointer select-none items-center space-x-1">
        <headwind-checkbox-button
          class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
        >
          <ng-template headwindCheckboxChecked>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="absolute h-4 w-4 stroke-rose-500"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
            </svg>
          </ng-template>
        </headwind-checkbox-button>

        <label class="cursor-pointer select-none text-sm"> With NgModel: {{ checked }} </label>
      </headwind-checkbox>

      <headwind-checkbox
        [formControl]="checkControl"
        class="inline-flex cursor-pointer select-none items-center space-x-1"
      >
        <headwind-checkbox-button
          class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
        >
          <ng-template headwindCheckboxChecked>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="absolute h-4 w-4 stroke-rose-500"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
            </svg>
          </ng-template>
        </headwind-checkbox-button>

        <label class="cursor-pointer select-none text-sm"> With FormControl: {{ checkControl.value }} </label>
      </headwind-checkbox>
    </div>
  `,
})
export class CheckboxModelBindingExampleComponent {
  checked = false;
  checkControl = new FormControl(false);
}

Disabled State

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

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';

@Component({
  selector: 'app-checkbox-disabled-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <div class="flex flex-col gap-2">
      <headwind-checkbox disabled checked class="inline-flex cursor-pointer select-none items-center space-x-1">
        <headwind-checkbox-button
          class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
        >
          <ng-template headwindCheckboxChecked>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="absolute h-4 w-4 stroke-rose-500"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
            </svg>
          </ng-template>
        </headwind-checkbox-button>

        <label class="cursor-pointer select-none text-sm"> Disabled with Checked </label>
      </headwind-checkbox>

      <headwind-checkbox disabled class="inline-flex cursor-pointer select-none items-center space-x-1">
        <headwind-checkbox-button
          class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
        >
          <ng-template headwindCheckboxChecked>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="absolute h-4 w-4 stroke-rose-500"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
            </svg>
          </ng-template>
        </headwind-checkbox-button>

        <label class="cursor-pointer select-none text-sm"> Disabled with Unchecked </label>
      </headwind-checkbox>

      <headwind-checkbox class="inline-flex cursor-pointer select-none items-center space-x-1">
        <headwind-checkbox-button
          class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
        >
          <ng-template headwindCheckboxChecked>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="absolute h-4 w-4 stroke-rose-500"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
            </svg>
          </ng-template>
        </headwind-checkbox-button>

        <label class="cursor-pointer select-none text-sm"> Not Disabled </label>
      </headwind-checkbox>
    </div>
  `,
  styles: [
    `
      @tailwind components;

      @layer components {
        .headwind-checkbox[disabled] {
          @apply cursor-not-allowed;

          .headwind-checkbox-button {
            @apply bg-zinc-200;

            svg {
              @apply stroke-zinc-400;
            }
          }

          label {
            @apply cursor-not-allowed text-zinc-400;
          }
        }
      }
    `,
  ],
})
export class CheckboxDisabledExampleComponent {}

Animation

Bind an animation trigger to the content of [headwindCheckboxChecked] to play animation when checked state is toggled.

import { Component } from '@angular/core';
import {
  HeadwindCheckboxButtonComponent,
  HeadwindCheckboxCheckedDirective,
  HeadwindCheckboxComponent,
} from '@favian/headwind-ui';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-checkbox-animation-example',
  standalone: true,
  imports: [HeadwindCheckboxComponent, HeadwindCheckboxButtonComponent, HeadwindCheckboxCheckedDirective],
  template: `
    <headwind-checkbox class="inline-flex cursor-pointer select-none items-center space-x-1">
      <headwind-checkbox-button
        class="relative flex h-5 w-5 items-center justify-center rounded border border-zinc-300 bg-white"
      >
        <ng-template headwindCheckboxChecked>
          <svg
            [@scaleUp]
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="absolute h-4 w-4 stroke-rose-500"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </ng-template>
      </headwind-checkbox-button>
    </headwind-checkbox>
  `,
  animations: [
    trigger('scaleUp', [
      state(
        'void',
        style({
          transform: 'scale(0)',
        }),
      ),
      transition(
        'void => *',
        animate(
          '.1s',
          style({
            transform: 'scale(1)',
          }),
        ),
      ),
      transition('* => void', animate('.1s')),
    ]),
  ],
})
export class CheckboxAnimationExampleComponent {}

Accessibility

Mouse Interaction

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

Keyboard Interaction

Command Target Description
Space <headwind-checkbox> Toggle the checked state.

API

HeadwindCheckboxComponent

The root component of Checkbox.

Selector

<headwind-checkbox>

Host Class

.headwind-checkbox<br/> .headwind-checked when Checkbox checked.

Inputs

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

Outputs

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

Methods

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

HeadwindCheckboxButtonComponent

A component for drawing a checkbox containing a checked icon.

Selector

&lt;headwind-checkbox-button&gt;

Host Class

.headwind-checkbox-button

HeadwindCheckboxCheckedDirective

A directive for a template that wraps a checked indicator.

Selector

ng-template[headwindCheckboxChecked]