Checkboxes and radios have been implemented to behave exactly like their native counterparts and add a slight animation when the selection state changes. Unlike v1 of react-md, all checkboxes and radios can be fully uncontrolled and will also reset correctly if a form reset button is clicked.

Checkboxes and radios can be created by either using the Checkbox and Radio components or the InputToggle component. The Checkbox and Radio components are just simple wrappers that will provide the correct type attribute and a reasonable default icon to use (a material icon for the checkbox/radio as an outline).

The Checkbox component also supports an indeterminate state to help indicate that it controls the checked state for other checkboxes as well. To use this feature:

• enable the indeterminate prop when all the checkboxes are not checked
• set the aria-checked="mixed" when at least one checkbox is checked but not all
• provide a space-delimited string of all the checkboxes it controls as the aria-controls attribute

The aria-controls part is a bit iffy since it might not actually do anything for screen readers and Lighthouse might also flag it as an invalid aria- attribute.

The Checkbox and Radio components use a little css trick with the ::before and ::after pseudo elements to animate the toggled states based on the :checked state. It is does this way so that each checkbox and radio can act like a native toggle input and not be fully controlled to swap out icons.

Unfortunately, this makes it a bit more difficult if you want to use custom icons that don't line up with the existing material icons' checkbox and radio outlines. When this happens, you'll want to use a new prop: disableIconOverlay to disable this behavior and implement your own icon swapping instead by either:

• handling icon swaps all in CSS
• make your checkboxes fully controlled
• make your entire radio group fully controlled

You can also increase or decrease the size of the checkbox and radio components by updating the used CSS Variables for the toggle. Just add a custom class name and use the following mixins:

• @include rmd-button-theme-update-var(icon-size, NEW_SIZE)
• @include rmd-icon-theme-update-var(size, NEW_SIZE)
• @include rmd-form-theme-update-var(icon-size, NEW_SIZE)

A switch is another version of the Checkbox component that allows the user to toggle between distinct on and off states. Just like a checkbox, the switch can be toggled with a spacebar press and trigger a form submit when the enter key is pressed.

You can also use the AsyncSwitch component that will update the behavior of the Switch. When the loading prop is enabled, the Switch will gain a circular progress indicator and prevent the switch from being toggled again until the loading prop is set to false . This sort of switch is useful if you are trying to send an API request to update some behavior, but it fails due to some error.