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 Summary)

Properties

_value _choices _internals _options _primaryInput formAssociated observedAttributes tagName

Accessors

abortSignal disabled editable form name value

Methods

_activateListeners _applyInputAttributes _buildElements _getValue _refresh _setValue _toggleDisabled attributeChangedCallback connectedCallback disconnectedCallback formDisabledCallback select unselect _disconnect _initialize _onClick

Properties

_value

_value: Set<any> = ...

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_options

_options: (HTMLOptionElement | HTMLOptGroupElement)[] = []

Predefined elements which were defined in the original HTML.

Protected_primaryInput

_primaryInput: HTMLElement

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

StaticformAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

StaticobservedAttributes

observedAttributes: string[] = ...

Attributes requiring change notifications

StatictagName

tagName: string = "multi-checkbox"

Accessors

abortSignal

  • get abortSignal(): AbortSignal

    An AbortSignal that can be passed to event listeners registered in subclasses. The signal will ensure that the listener is removed when the element is disconnected from the DOM. Not available in the constructor.

    Returns AbortSignal

disabled

  • get disabled(): boolean

    Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

    Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

form

  • get form(): HTMLFormElement

    The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

    The input element name.

    Returns string

value

Methods

_activateListeners

_applyInputAttributes

  • _applyInputAttributes(input: HTMLElement): void
    Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: HTMLElement

    Returns void

_buildElements

_getValue

_refresh

_setValue

_toggleDisabled

attributeChangedCallback

connectedCallback

disconnectedCallback

formDisabledCallback

select

  • select(value: string): void

    Mark a choice as selected.

    Parameters

    • value: string

      The value to add to the chosen set

    Returns void

unselect

  • unselect(value: string): void

    Mark a choice as un-selected.

    Parameters

    • value: string

      The value to delete from the chosen set

    Returns void

Protected_disconnect

  • _disconnect(): void
    Protected

    A method provided for subclasses to perform tear-down workflows as an alternative to overriding disconnectedCallback.

    Returns void

Protected_initialize

Protected_onClick

  • _onClick(event: PointerEvent): 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

Settings

Member Visibility

On This Page

Properties
Accessors
Methods