Open Source

React Checkbox Overview

The React Checkbox is a component that lets you add checkboxes to your React 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 React checkbox component and ability to use it with forms.

Checkbox Example

Usage

At its core, the IgrCheckbox 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 the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrCheckbox and its necessary CSS, like so:

import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

<IgrCheckbox></IgrCheckbox>

The IgrCheckbox 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:

<IgrCheckbox><span>Label</span></IgrCheckbox>

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):

<IgrCheckbox labelPosition="before"></IgrCheckbox>

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>
<IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>

Checked

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

<IgrCheckbox checked={true}></IgrCheckbox>

Indeterminate

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

<IgrCheckbox indeterminate={true}></IgrCheckbox>

Required

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

<IgrCheckbox required={true}></IgrCheckbox>

Invalid

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

<IgrCheckbox invalid={true}></IgrCheckbox>

Disabled

You can use the Disabled attribute to disable the checkbox.

<IgrCheckbox disabled={true}></IgrCheckbox>

Forms

You can use the Name and Value attributes when using the checkbox with Form.

<IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>

Styling

The IgrCheckbox 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) {
  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
}

igc-checkbox::part(control checked)::after {
  --fill-color: var(--ig-secondary-500); /* checkbox background color */
}