Web Components Checkbox Overview

The Web Components Checkbox is a component that lets you add checkboxes to your Web Components apps. It behaves as a standard HTML checkbox, enabling users to select basic checked and unchecked states or an additional indeterminate state. You also get full control over the styling of the Web Components checkbox component and ability to use it with forms.

Checkbox Example

import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);
export class CheckboxOverview {
    constructor() {
    }
}

new CheckboxOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox>Checkbox</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

At its core, the IgcCheckboxComponent allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines.

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

You will then need to import the IgcCheckboxComponent, its necessary CSS, and register its module, like so:

import { defineComponents, IgcCheckboxComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcCheckboxComponent is as follows:

<igc-checkbox></igc-checkbox>
html

The IgcCheckboxComponent component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

To provide a meaningful label for the checkbox, simply place some text between the opening and closing tags:

<igc-checkbox>Label</igc-checkbox>
html

You can specify if the label should be positioned before or after the checkbox toggle by setting the label-position attribute of the checkbox. Allowed values are before and after (default):

<igc-checkbox label-position="before">Label</igc-checkbox>
html

The checkbox can also be labelled by elements external to the checkbox. In this case, the user is given full control to position and style the label in accordance with their needs.

<span id="checkbox-label">Label</span>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>
html

import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './CheckboxLabelStyles.css'

defineComponents(IgcCheckboxComponent);
export class CheckboxLabel {
    constructor() {
    }
}

new CheckboxLabel();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Label</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <igc-checkbox aria-labelledby="checkbox-label" label-position="before"></igc-checkbox>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.wrapper {
    display: flex;
    align-items: center;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Checked

You can use the checked attribute of the component to determine whether the checkbox should be toggled on or off by default.

<igc-checkbox checked></igc-checkbox>
html

import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);
export class CheckboxChecking {
    constructor() {
    }
}

new CheckboxChecking();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Checking</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox checked>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Indeterminate

You can use the indeterminate property of the component to set the checkbox's value to neither true nor false.

<igc-checkbox indeterminate></igc-checkbox>
html

import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);
export class CheckboxIndeterminate {
    constructor() {
    }
}

new CheckboxIndeterminate();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Indeterminate</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox indeterminate>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Required

You can use the required property to mark the checkbox as required.

<igc-checkbox required></igc-checkbox>
html

Invalid

You can use the invalid attribute to mark the checkbox as invalid.

<igc-checkbox invalid></igc-checkbox>
html

Disabled

You can use the disabled attribute to disable the checkbox.

<igc-checkbox disabled></igc-checkbox>
html

import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);
export class SwitchDisabled {
    constructor() {
    }
}

new SwitchDisabled();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Disabled</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox disabled>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Forms

You can use the name and value attributes when using the checkbox with Form.

<igc-checkbox name="wifi" value="enabled"></igc-checkbox>
html

Styling

The IgcCheckboxComponent component exposes four CSS parts which we can use for styling:

Name	Description
`base`	The base wrapper of the checkbox.
`control`	The checkbox input element.
`indicator`	The checkbox indicator icon.
`label`	The checkbox label.

With this four CSS parts we have full control over the Checkbox styling.

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css