Radios can be associated with a 'conditionally revealed' content block – for example, a radio 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 radio state.
HTML element to use for radios
Protected
_$rootPrivate
$inputsStatic
elementStatic
moduleName for the component used when initialising using data-module attributes.
Protected
$rootProtected
Returns the root element of the component
Private
handlePrivate
Click event handler
Handle a click within the component root – if the click occurred on a radio, sync the state of the conditional reveal for all radio buttons in the same form with the same name (because checking one radio could have un-checked a radio under the root of another Radio component)
Click event
Private
syncPrivate
syncStatic
check
Radios component