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
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.
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
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
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
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
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
IgrCheckbox
checked
disabled
Form