Descripción general de la casilla de verificación React

React Checkbox es un componente que le permite agregar casillas de verificación a sus aplicaciones React. Se comporta como una casilla de verificación HTML estándar, lo que permite a los usuarios seleccionar estados básicos marcados y no marcados o un estado indeterminado adicional. También obtienes control total sobre el estilo del componente de casilla de verificación React y la posibilidad de usarlo con formularios.

Checkbox Example

Usage

En esencia, IgrCheckbox permite elegir entre el estado seleccionado o no seleccionado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

Primero, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

npm install igniteui-react

Luego necesitarás importar IgrCheckbox, su CSS necesario y registrar su módulo, así:

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

La forma más sencilla de empezar a utilizar IgrCheckbox es la siguiente:

<IgrCheckbox></IgrCheckbox>

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

Examples

Label

Para proporcionar una etiqueta significativa para la casilla de verificación, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

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

Puede especificar si la etiqueta debe colocarse antes o después de la casilla de verificación configurando el atributo label-position de la casilla de verificación. Los valores permitidos son before y after (predeterminado):

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

La casilla de verificación también puede estar etiquetada por elementos externos a la casilla de verificación. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

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

Checked

Puede utilizar el atributo checked del componente para determinar si la casilla de verificación debe activarse o desactivarse de forma predeterminada.

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

Indeterminate

Puede utilizar la propiedad indeterminate del componente para establecer el valor de la casilla de verificación en verdadero ni falso.

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

Required

Puede utilizar la propiedad required para marcar la casilla de verificación según sea necesario.

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

Invalid

Puede utilizar el atributo invalid para marcar la casilla de verificación como no válida.

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

Disabled

Puede utilizar el atributo disabled para deshabilitar la casilla de verificación.

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

Forms

Puede utilizar los name atributos y value cuando utilice la casilla de verificación con Form.

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

Styling

El componente de casilla de verificación expone varias partes CSS (base, control, indicator y label) para brindarle control total sobre su estilo.

igc-checkbox::part(indicator) {
  &::after {
    padding: 12px;
    border-radius: 14px;
  }
}

igc-checkbox::part(indicator checked) {
  border-radius: 0;

  &::after {
    background: olive;
    border-color: olive;
    stroke: beige;
  }
}