Class Checkboxes

Checkboxes component

Hierarchy (View Summary)

Constructors

constructor

Properties

_$root $inputs elementType moduleName

Accessors

$root

Methods

handleClick syncAllConditionalReveals syncConditionalRevealWithInputState unCheckAllInputsExcept unCheckExclusiveInputs checkSupport

Constructors

constructor

  • new Checkboxes($root: Element): 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

    • $root: Element

      HTML element to use for checkboxes

    Returns Checkboxes

Properties

Protected_$root

_$root: HTMLElement

Private$inputs

$inputs: NodeListOf<HTMLInputElement>

StaticelementType

elementType: new () => Element = HTMLElement

StaticmoduleName

moduleName: string = 'govuk-checkboxes'

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

Accessors

Protected$root

Methods

PrivatehandleClick

  • handleClick(event: MouseEvent): void
  • Private

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

    Parameters

    • event: MouseEvent

      Click event

    Returns void

PrivatesyncAllConditionalReveals

PrivatesyncConditionalRevealWithInputState

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

StaticcheckSupport

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods