Class Checkboxes

Checkboxes component

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • Checkboxes

Constructors

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

    Parameters

    • $module: Element

      HTML element to use for checkboxes

    Returns Checkboxes

Properties

$inputs: NodeListOf<HTMLInputElement>
$module: HTMLElement
moduleName: string = 'govuk-checkboxes'

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

Methods

  • Private

    Click event handler

    Handle a click within the $module – if the click occurred on a checkbox, sync the state of any associated conditional reveal with the checkbox state.

    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

      Checkbox input

    Returns void

  • Private

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

    Parameters

    • $input: HTMLInputElement

      Checkbox input

    Returns void

  • Private

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

    Parameters

    • $input: HTMLInputElement

      Checkbox input

    Returns void