Checkboxes can be associated with a 'conditionally revealed' content block – for example, a checkbox for 'Phone' could reveal an additional form field for the user to enter their phone number.
These associations are made using a data-aria-controls attribute, which
is promoted to an aria-controls attribute during initialisation.
We also need to restore the state of any conditional reveals on the page (for example if the user has navigated back), and set up event handlers to keep the reveal in sync with the checkbox state.
HTML element to use for checkboxes
Protected_Private$inputsStaticelementStaticmoduleName for the component used when initialising using data-module attributes.
Protected$rootProtectedReturns the root element of the component
PrivatehandlePrivateClick event handler
Handle a click within the component root – if the click occurred on a checkbox, sync the state of any associated conditional reveal with the checkbox state.
Click event
PrivatesyncPrivateSync the conditional reveal states for all checkboxes in this component.
PrivatesyncPrivateSync conditional reveal with the input state
Synchronise the visibility of the conditional reveal, and its accessible state, with the input's checked state.
Checkbox input
PrivateunPrivateUncheck other checkboxes
Find any other checkbox inputs with the same name value, and uncheck them. This is useful for when a “None of these" checkbox is checked.
Checkbox input
PrivateunPrivateUncheck exclusive checkboxes
Find any checkbox inputs with the same name value and the 'exclusive' behaviour, and uncheck them. This helps prevent someone checking both a regular checkbox and a "None of these" checkbox in the same fieldset.
Checkbox input
Staticcheck
Checkboxes component