Saltar al contenido
Ayuda a traducir esta página

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.

Basic checkboxes

Checkbox with FormControlLabel

Checkbox can be provided with a label thanks to the FormControlLabel component.

Checkboxes con FormGroup

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

Assign responsibility

Be careful

Pick two *

You can display an error

Ubicación de Etiqueta

Puede cambiar la ubicación de la etiqueta:

Label Placement

Customized checkbox

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

When to use

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' }}
/>

API