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 IgrForm 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 atributos de name y value cuando utilice la casilla de verificación con IgrForm.

    <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;
  }
}

    API References

    Additional Resources