Checkbox

Los Checkbox permiten al usuario seleccionar uno o más elementos de un conjunto.

Checkboxes se pueden usar para activar o desactivar una opción.

Si tienes varias opciones en una lista, puedes ahorrar espacio usando checkboxes en lugar de utilizar interruptores de encendedido/apagado. Si tienes una única opción, evita usar un checkbox y utiliza un interruptor de encendido/apagado en su lugar.

Checkboxes básicos

Checkbox con FormControlLabel

A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are actually three states a checkbox can be in: checked, unchecked, or indeterminate.

Checkbox puede ser provisto de una etiqueta gracias al componente FormControlLabel.

Checkboxes con FormGroup

Checkbox puede ser provisto de una etiqueta gracias al componente FormControlLabel.

Ubicación de Etiqueta

FormGroup es un contenedor muy útil usado para agrupar componentes de controles de selección que proporciona una API más sencilla.

Ubicación de Etiqueta

Puede cambiar la ubicación de la etiqueta:

Label Placement

TopStartBottomEnd

Customized checkbox

He aquí un ejemplo de personalización del componente. You can learn more about this in the overrides documentation page.

🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.

Cuándo usarlo

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)

Todos los controles de formulario deben tener etiquetas, y esto incluye radio buttons, checkboxes, and switches. En la mayoría de los casos, esto se hace usando el elemento <label> (FormControlLabel).
Cuando no se puede usar una etiqueta, es necesario agregar un atributo directamente al componente de entrada. En este caso, puede aplicar el atributo adicional (por ejemplo, aria-label, aria-labelledby, title) a través de la propiedad inputProps.

<Checkbox
  value="checkedA"
  inputProps={{ 'aria-label': 'Checkbox A' }}
/>