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.

Checkboxes básicos

<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />

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.

<FormGroup>
  <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>

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.

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

He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

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

API