Checkbox

Checkboxes present a list of multiple options to a user, who may select all or none. If you require more than 7 options, consider using a Select field instead.

Checkbox

Use a single Checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the Checkbox as many times as they like. Do not use the Checkbox when a user MUST make an active decision, such as yes or no (use Radio Group) or if you are expecting the changes to apply instantly (use a Switch).

Checkbox group

If there are multiple options to select, wrap the checkboxes in a Checkbox Group. By doing so, all of the selections made will belong to the same Form value. You may also require that a user select a certain amount of options to continue.

Required

If the checkbox selection is required, you must pass the required prop. This will prevent any Form submission until all of the options are selected. This is useful when a user must select all boxes to progress further in the application, like when accepting Terms & Conditions.

Disabled

You may wish to disable a checkbox group to prevent a user from selecting any information while some task is being completed, or to restrict a user's access.

Sometimes you may wish to only disable certain options within a checkbox group. You can do so by passing the disabled prop to the checkbox rather than the checkbox group.