Angular Checkbox Component Overview

    Angular Checkbox is an extension of the standard HTML input type checkbox, providing similar functionality, only enhanced with things like animations and Material Design styling. It enables users to choose one or several predefined options, mostly in forms and surveys.

    The Ignite UI for Angular Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox. Some of the features it offers are styling options, themes, checked, unchecked, and indeterminate states, and others.

    Angular Checkbox Example

    See the checkbox in action in the following Angular Checkbox example below.

    Getting Started with Ignite UI for Angular Checkbox

    To get started with the Ignite UI for Angular Checkbox component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxCheckboxModule in the app.module.ts file:

    // app.module.ts

import { IgxCheckboxModule } from 'igniteui-angular/checkbox';
// import { IgxCheckboxModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxCheckboxModule],
    ...
})
export class AppModule {}

    Alternatively, as of 16.0.0 you can import the IgxCheckboxComponent as a standalone dependency.

    // home.component.ts

import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
// import { IgxCheckboxComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-checkbox [checked]="true">
        Simple checkbox
    </igx-checkbox>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxCheckboxComponent]
})
export class HomeComponent {}

    Now that you have the Ignite UI for Angular Checkbox module or component imported, you can start using the igx-checkbox component.

    Using the Angular Checkbox Component

    To make the checkbox in the demo, add the following code inside the component template:

    <igx-checkbox [checked]="true">
    Simple checkbox
</igx-checkbox>

    Checkbox properties

    Let's enhance the code above by binding the checkbox properties to some data. Say, we have an array of task objects, each having two properties: description and done. You can bind the checkbox component checked property to the underlying task object done property. Analogically, you can bind the value property to description. Optionally, you can also bind the change event and add some custom logic in the provided event handler method.

    // tasks.component.ts
@Component({...})
export class HomeComponent {
    public tasks = [
        { done: true, description: 'Research' },
        { done: true, description: 'Implement' },
        { done: false, description: 'Test' }
    ];

    public statusChanged() {
        // event handler logic
    }
}

    Enhance the component template by adding a checkbox for each task and then setting the corresponding property bindings:

    <!--tasks.component.html-->
<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
    {{ task.description }}
</igx-checkbox>

    Add some styles:

    //task.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}

    The final result would be something like that:

    Label Positioning

    You can position the label using the checkbox's labelPosition property:

    <igx-checkbox labelPosition="before"></igx-checkbox>

    If the labelPosition is not set, the label will be positioned after the checkbox.

    Indeterminate Checkbox in Angular

    In addition to the checked and unchecked states, there is a third state a checkbox can be in: indeterminate. In this state the checkbox is neither checked, nor unchecked. This is set using the checkbox's indeterminate property:

    <igx-checkbox [indeterminate]="true"></igx-checkbox>

    We can create an app that has a list of tasks that need to be done and one master checkbox in Angular that's going to be checked only if all the tasks are completed. Let's update the previous sample. Starting with the template:

    <!-- app.component.html -->
<igx-checkbox
    [readonly]="true"
    [(ngModel)]="masterCheckbox.checked"
    [(indeterminate)]="masterCheckbox.indeterminate"
    (click)="toggleAll()"
>
All done
</igx-checkbox>
<igx-checkbox class="tasks" *ngFor="let task of tasks" [(ngModel)]="task.done">
    {{ task.description }}
</igx-checkbox>

    Next, we're going to indent the subtasks, so it's more visual that they are part of the same group.

    // app.component.scss
:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}
igx-checkbox {
    margin-top: 16px;
}
igx-checkbox.tasks {
    padding-left: 10px;
}

    And finally, we'll create the logic of our application:

    // app.component.ts
public tasks = [
    { done: true, description: 'Research' },
    { done: true, description: 'Implement' },
    { done: false, description: 'Test' }
];
public get masterCheckbox() {
    return this.tasks.reduce(
        (acc, curr, idx, arr) => {
            acc.checked = acc.checked && curr.done;
            acc.done = curr.done ? acc.done + 1 : acc.done;
            acc.indeterminate = acc.done === arr.length ? false : !!acc.done;
            return acc;
        },
        {
            checked: true,
            done: 0,
            indeterminate: false
        }
    );
}
public toggleAll() {
    if (this.masterCheckbox.checked) {
        for (const task of this.tasks) {
            task.done = false;
        }
    } else {
        for (const task of this.tasks) {
            task.done = true;
        }
    }
}

    After all that is done, our application should look like this:

    Styling

    Checkbox Theme Property Map

    When you modify a primary property, all related dependent properties are updated automatically:

    Primary Property Dependent Property Description
    $empty-color
    		$empty-color-hover The unchecked border color on hover.
    $focus-outline-color (indigo variant only) The focus outline color for indigo variant.
    $fill-color
    		$fill-color-hover The checked border and fill colors on hover.
    $tick-color The checked mark color.
    $focus-border-color The focus border color.
    $disabled-indeterminate-color The disabled border and fill colors in indeterminate state.
    $focus-outline-color (bootstrap variant only) The focus outline color for bootstrap variant.
    $focus-outline-color-focused (indigo variant only) The focus outline color for focused state in indigo variant.
    $error-color
    		$error-color-hover The border and fill colors in invalid state on hover.
    $focus-outline-color-error The focus outline color in error state.
    $label-color $label-color-hover The text color for the label on hover.

    Note: The actual results may vary depending on the theme variant.

    To get started with styling the checkbox, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Then, we create a new theme that extends the checkbox-theme and setting parameters to style the checkbox elements. By specifying the $empty-color and $fill-color, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed.

    // in styles.scss
$custom-checkbox-theme: checkbox-theme(
    $empty-color: #ecaa53,
    $fill-color: #ecaa53,
    $border-radius: 5px
);

    Finally, include the custom theme in your application:

    @include css-vars($custom-checkbox-theme);

    In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the SAP UI5 design system.

    Styling with Tailwind

    You can style the checkbox using our custom Tailwind utility classes. Make sure to set up Tailwind first.

    Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    The utility file includes both light and dark theme variants.

    • Use light-* classes for the light theme.
    • Use dark-* classes for the dark theme.
    • Append the component name after the prefix, e.g., light-checkbox, dark-checkbox.

    Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

    You can find the full list of properties in the checkbox-theme. The syntax is as follows:

    <igx-checkbox
class="!light-checkbox
![--empty-color:#7B9E89]
![--fill-color:#7B9E89]"
[checked]="true">
    Styled checkbox
</igx-checkbox>
    Note

    The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

    At the end your checkbox should look like this:

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.