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, its necessary CSS, and register its module, like so:

    import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();

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

    <IgrCheckbox></IgrCheckbox>

    [!WARNING] The IgrCheckbox component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    Para fornecer um rótulo significativo para a caixa de seleção, basta colocar algum texto entre as tags de abertura e fechamento:

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

    Você pode especificar se o rótulo deve ser posicionado antes ou depois da alternância da caixa de seleção definindo o atributo label-position da caixa de seleção. Os valores permitidos são before e after (padrão):

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

    A caixa de seleção também pode ser rotulada por elementos externos à caixa de seleção. Nesse caso, o usuário tem controle total para posicionar e estilizar o rótulo de acordo com suas necessidades.

    <span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>

    Checked

    Você pode usar o atributo checked do componente para determinar se a caixa de seleção deve ser ativada ou desativada por padrão.

    <IgrCheckbox checked="true"></IgrCheckbox>

    Indeterminate

    Você pode usar a propriedade indeterminate do componente para definir o valor da caixa de seleção como nem verdadeiro nem falso.

    <IgrCheckbox indeterminate="true"></IgrCheckbox>

    Required

    Você pode usar a propriedade required para marcar a caixa de seleção como obrigatória.

    <IgrCheckbox required="true"></IgrCheckbox>

    Invalid

    Você pode usar o atributo invalid para marcar a caixa de seleção como inválida.

    <IgrCheckbox invalid="true"></IgrCheckbox>

    Disabled

    Você pode usar o atributo disabled para desabilitar a caixa de seleção.

    <IgrCheckbox disabled="true"></IgrCheckbox>

    Forms

    Você pode usar os atributos name e value ao usar a caixa de seleção com 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) {
  stroke: var(--ig-secondary-500-contrast);
}

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

    API References

    Additional Resources