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

    React Checkbox es un componente que te permite agregar casillas de verificación a tus 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 capacidad de usarlo con formularios.

    Checkbox Example

    EXAMPLE
    TSX
    CSS

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

    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, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react
    cmd

    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();
    tsx

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

    <IgrCheckbox></IgrCheckbox>
    tsx

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

    Ignite UI for React | CTA Banner

    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>
    tsx

    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>
    tsx

    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>
    tsx

    EXAMPLE
    TSX
    CheckboxLabelStyles.css
    index.css

    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>
    tsx

    EXAMPLE
    TSX
    CSS

    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>
    tsx

    EXAMPLE
    TSX
    CSS

    Required

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

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

    Invalid

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

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

    Disabled

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

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

    EXAMPLE
    TSX
    CSS

    Forms

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

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

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

    API References

    Additional Resources