Class HTMLMultiCheckboxElement

Provide a multi-select workflow as a grid of input checkbox elements.

Example: Multi-Checkbox HTML Markup

<multi-checkbox name="check-many-boxes">
  <optgroup label="Basic Options">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </optgroup>
  <optgroup label="Advanced Options">
   <option value="fizz">Fizz</option>
    <option value="buzz">Buzz</option>
  </optgroup>
</multi-checkbox>

Hierarchy (view full)

AbstractMultiSelectElement
- HTMLMultiCheckboxElement

Properties

`Protected` _options

_options: (HTMLOptGroupElement | HTMLOptionElement)[]

Predefined elements which were defined in the original HTML.

`Protected` _choices

_choices: Record<string, string> = {}

An object which maps option values to displayed labels.

`Protected` _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

`Protected` _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

`Private` #checkboxes

#checkboxes: HTMLInputElement[]

The checkbox elements used to select inputs

`Static` tagName

tagName: string = "multi-checkbox"

`Static` formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

form

get form(): HTMLFormElement
The form this element belongs to.

Returns HTMLFormElement
Inherited from AbstractMultiSelectElement.form

name

get name(): string
The input element name.

Returns string
Inherited from AbstractMultiSelectElement.name

value

get value(): FormInputValueType
The value of the input element.

Returns FormInputValueType
Inherited from AbstractMultiSelectElement.value

disabled

get disabled(): boolean
Is this element disabled?

Returns boolean
Inherited from AbstractMultiSelectElement.disabled

editable

get editable(): boolean
Is this field editable? The field can be neither disabled nor readonly.

Returns boolean
Inherited from AbstractMultiSelectElement.editable

Methods

_buildElements

_buildElements(): (HTMLFieldSetElement | HTMLLabelElement)[]
Returns (HTMLFieldSetElement | HTMLLabelElement)[]
Overrides AbstractMultiSelectElement._buildElements

_refresh

_refresh(): void
Returns void
Overrides AbstractMultiSelectElement._refresh

_activateListeners

_activateListeners(): void
Returns void
Overrides AbstractMultiSelectElement._activateListeners

_toggleDisabled

_toggleDisabled(disabled): void
Parameters
- disabled: any
Returns void
Overrides AbstractMultiSelectElement._toggleDisabled

select

select(value): void
Mark a choice as selected.
Parameters
- value: string
  The value to add to the chosen set
Returns void
Inherited from AbstractMultiSelectElement.select

unselect

unselect(value): void
Mark a choice as un-selected.
Parameters
- value: string
  The value to delete from the chosen set
Returns void
Inherited from AbstractMultiSelectElement.unselect

_getValue

_getValue(): any[]
Returns any[]
Inherited from AbstractMultiSelectElement._getValue

_setValue

_setValue(value): void
Parameters
- value: any
Returns void
Inherited from AbstractMultiSelectElement._setValue

connectedCallback

connectedCallback(): void
Initialize the custom element, constructing its HTML.

Returns void
Inherited from AbstractMultiSelectElement.connectedCallback

_applyInputAttributes

_applyInputAttributes(input): void
Internal
Apply key attributes on the containing custom HTML element to input elements contained within it.
Parameters
- input: any
Returns void
Inherited from AbstractMultiSelectElement._applyInputAttributes

`Protected` _initialize

_initialize(): void
Protected
Preserve existing elements which are defined in the original HTML.

Returns void
Inherited from AbstractMultiSelectElement._initialize

`Protected` _onClick

_onClick(event): void
Protected
Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.
Parameters
- event: PointerEvent
Returns void
Inherited from AbstractMultiSelectElement._onClick

`Private` #buildGroup

#buildGroup(optgroup): HTMLFieldSetElement
Translate an input element into a
of checkboxes.
Parameters
- optgroup: HTMLOptGroupElement
  The originally configured optgroup
Returns HTMLFieldSetElement
The created fieldset grouping

`Private` #buildOption

#buildOption(option): HTMLLabelElement
Build an input
Parameters
- option: HTMLOptionElement
  The originally configured option
Returns HTMLLabelElement
The created labeled checkbox element

`Private` #onChangeCheckbox

#onChangeCheckbox(event): void
Handle changes to a checkbox input, marking the selected option as a chosen value.
Parameters
- event: Event
  The change event on the checkbox input element
Returns void

Class HTMLMultiCheckboxElement

Example: Multi-Checkbox HTML Markup

Hierarchy (view full)

Index

Properties

Accessors

Methods

Properties

Protected _options

Protected _choices

Protected _internals

Protected _primaryInput

Private #checkboxes

Static tagName

Static formAssociated

Accessors

form

Returns HTMLFormElement

name

Returns string

value

Returns FormInputValueType

disabled

Returns boolean

editable

Returns boolean

Methods

_buildElements

Returns (HTMLFieldSetElement | HTMLLabelElement)[]

_refresh

Returns void

_activateListeners

Returns void

_toggleDisabled

Parameters

Returns void

select

Parameters

Returns void

unselect

Parameters

Returns void

_getValue

Returns any[]

_setValue

Parameters

Returns void

connectedCallback

Returns void

_applyInputAttributes

Parameters

Returns void

Protected _initialize

Returns void

Protected _onClick

Parameters

Returns void

Private #buildGroup

Parameters

Returns HTMLFieldSetElement

Private #buildOption

Parameters

Returns HTMLLabelElement

Private #onChangeCheckbox

Parameters

Returns void

Settings

Member Visibility

Theme

On This Page

`Protected` _options

`Protected` _choices

`Protected` _internals

`Protected` _primaryInput

`Private` #checkboxes

`Static` tagName

`Static` formAssociated

`Protected` _initialize

`Protected` _onClick

`Private` #buildGroup

`Private` #buildOption

`Private` #onChangeCheckbox