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

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>

Tamaño

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

<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
  {...label}
  defaultChecked
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
/>

Color

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

<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
<Checkbox
  {...label}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
/>

Controlled

Puede cambiar la ubicación de la etiqueta:

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

Cuándo usarlo

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.

⚠️ When indeterminate is set, the value of the checked prop only impacts the form submitted values. It has no accessibility or UX implications.

Accesibilidad

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

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.

<BpCheckbox />
<BpCheckbox defaultChecked />
<BpCheckbox disabled />

🎨 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