Radios component

Hierarchy (view full)

Constructors

  • 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.

    Parameters

    • $root: Element

      HTML element to use for radios

    Returns Radios

Properties

_$root: HTMLElement
$inputs: NodeListOf<HTMLInputElement>
elementType: (new () => Element) = HTMLElement
moduleName: string = 'govuk-radios'

Name for the component used when initialising using data-module attributes.

Accessors

Methods

  • Private

    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)

    Parameters

    • event: MouseEvent

      Click event

    Returns void

  • Private

    Sync conditional reveal with the input state

    Synchronise the visibility of the conditional reveal, and its accessible state, with the input's checked state.

    Parameters

    • $input: HTMLInputElement

      Radio input

    Returns void