Class HyloCheckbox

A alternative to ion-checkbox which adds accessibility functionality. Use it instead of ion-checkbox.

For manipulation of ion-checkbox properties after initialisation use the ion-component directly.

Properties

announcementChecked announcementSilent announcementUnchecked announcementWithLabel checkboxId checkboxLabel checkboxLabelledby checkboxRole checked color disabled dontAriaHideIonLabel errorMessageId indeterminate invalid mode name readonly required value

Methods

getChecked getIonCheckbox getValue setPosition

Events

hyloHasFocus

Properties

announcementChecked

announcementChecked: string = 'aktiviert'

Text which gets announced in a screen reader when the checkbox gets checked.

announcementSilent

announcementSilent: boolean = false

Turns off the screen reader announcement.

announcementUnchecked

announcementUnchecked: string = 'nicht aktiviert'

Text which gets announced in a screen reader when the checkbox gets unchecked.

announcementWithLabel

announcementWithLabel: boolean = false

Announces the (un)checked status together with the label.

checkboxId

checkboxId: string

The id of the actual checkbox element.

checkboxLabel

checkboxLabel: string

The aria-label value given to the wrapped checkbox field.

checkboxLabelledby

checkboxLabelledby: string

The aria-labelledby value given to the wrapped checkbox field.

The component actually takes the textContent from the label component and creates an aria-label value out of it.

checkboxRole

checkboxRole: "option" | "switch" | "checkbox" = 'checkbox'

The role of the checkbox.

A "switch" represents on/off values, as opposed to checked/unchecked values for a "checkbox". "option" is given automaticly when part of a hylo-checkbox-group.

checked

checked: boolean = false

Same as ion-checkbox.

color

color: string

Same as ion-checkbox.

disabled

disabled: boolean = false

Same as ion-checkbox.

dontAriaHideIonLabel

dontAriaHideIonLabel: boolean

An ion-label component which is bundled with this component under an ion-item is aria-hidden by default. This setting disables the default setting. You can still set the aria-hidden attribute manually.

errorMessageId

errorMessageId: string

The id of an element which holds an error message for this component. The error message is only considered when the component is invalid.

indeterminate

indeterminate: boolean = false

Same as ion-checkbox.

invalid

invalid: boolean = null

If not set, the component determents its invalidation based on "required" and its value.

mode

mode: "md" | "ios"

Same as ion-checkbox.

name

name: string

Same as ion-checkbox.

readonly

readonly: boolean = false

Sets the wrapped ion-checkbox to "disabled" but keeps the value to be sent.

required

required: boolean

Is the checkbox required to be checked.

value

value: string = 'on'

Same as ion-checkbox.

Methods

getChecked

  • getChecked(): Promise<boolean>

  • Returns whether the wrapped ion-checkbox component is checked.

    Returns Promise<boolean>

getIonCheckbox

  • getIonCheckbox(): Promise<HTMLIonCheckboxElement>

  • Returns the wrapped ion-checkbox component.

    Returns Promise<HTMLIonCheckboxElement>

getValue

  • getValue(): Promise<string>

  • Returns the value of the wrapped ion-checkbox component.

    Returns Promise<string>

setPosition

  • setPosition(position, total): Promise<void>

  • Sets the aria position of the element in a group of elements.

    if "position" and "total" is set to 0, the attributes are removed.

    Parameters

    • position: number
    • total: number

    Returns Promise<void>

Events

hyloHasFocus

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc