Class Checkboxes

Checkboxes component

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • Checkboxes

Constructors

constructor

Properties

$inputs $module moduleName

Methods

handleClick syncAllConditionalReveals syncConditionalRevealWithInputState unCheckAllInputsExcept unCheckExclusiveInputs

Constructors

constructor

  • new Checkboxes($module): Checkboxes

  • 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

Private$inputs

$inputs: NodeListOf<HTMLInputElement>

Private$module

$module: HTMLElement

StaticmoduleName

moduleName: string = 'govuk-checkboxes'

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

Methods

PrivatehandleClick

  • handleClick(event): void
  • 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

PrivatesyncAllConditionalReveals

PrivatesyncConditionalRevealWithInputState

  • syncConditionalRevealWithInputState($input): 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

PrivateunCheckAllInputsExcept

  • unCheckAllInputsExcept($input): 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

PrivateunCheckExclusiveInputs

  • unCheckExclusiveInputs($input): 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

Settings

Member Visibility

On This Page

Constructors
Properties
Methods