Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcSwitchComponent

Similar to a checkbox, a switch controls the state of a single setting on or off.

Element

igc-switch

Slot

  • The switch label.

Fires

igcChange - Emitted when the control's checked state changes.

Fires

igcFocus - Emitted when the control gains focus.

Fires

igcBlur - Emitted when the control loses focus.

Csspart

base - The base wrapper of the switch.

Csspart

control - The switch control.

Csspart

thumb - The position indicator of the switch.

Csspart

label - The switch label.

Hierarchy

  • IgcCheckboxBaseComponent
    • IgcSwitchComponent

Constructors

constructor

Properties

ariaLabelledby checked disabled invalid labelPosition name required value styles tagName

Methods

blur checkValidity click connectedCallback disconnectedCallback emitEvent focus reportValidity setCustomValidity

Constructors

Abstract constructor

Properties

ariaLabelledby

ariaLabelledby: string

Sets the aria-labelledby attribute for the control.

checked

checked: boolean = false

The checked state of the control.

Attr

disabled

disabled: boolean = false

Disables the control.

Attr

invalid

invalid: boolean = false

Controls the validity of the control.

Attr

labelPosition

labelPosition: "after" | "before" = 'after'

The label position of the control.

Attr

label-position

name

name: string

The name attribute of the control.

Attr

required

required: boolean = false

Makes the control a required field.

Attr

value

value: string

The value attribute of the control.

Attr

Static styles

styles: CSSResult = styles

Static Readonly tagName

tagName: "igc-switch" = 'igc-switch'

Methods

blur

checkValidity

  • Checks for validity of the control and emits the invalid event if it invalid.

    Returns boolean

click

connectedCallback

disconnectedCallback

emitEvent

  • Type Parameters

    • K extends keyof IgcCheckboxEventMap

    • D extends boolean | void

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean

focus

  • Sets focus on the control.

    Parameters

    • Optional options: FocusOptions

    Returns void

reportValidity

  • Checks for validity of the control and shows the browser message if it invalid.

    Returns boolean

setCustomValidity

  • Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns void