Similar to a checkbox, a switch controls the state of a single setting on or off.
Element
igc-switch
Slots
default — The switch label.
CSS Parts
base — The base wrapper of the switch.
control — The switch input element.
thumb — The position indicator of the switch.
label — The switch label.

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Inherited from: IgcCheckboxBaseComponent

The disabled state of the component.

 
disabled: boolean

Defined in src/internals/mixins/forms/types.ts:32

invalid

Section titled "invalid"

Inherited from: IgcCheckboxBaseComponent

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/internals/mixins/forms/types.ts:39

labelPosition

Section titled "labelPosition"

Inherited from: IgcCheckboxBaseComponent

The label position of the control.

 
labelPosition: ToggleLabelPosition = 'after'

Defined in src/components/checkbox/checkbox-base.ts:91

name

Section titled "name"

Inherited from: IgcCheckboxBaseComponent

The name of the control, submitted with the form data.

 
name: string

Defined in src/internals/mixins/forms/types.ts:45

Accessors

Section titled "Accessors"

checked

Section titled "checked"

Inherited from: IgcCheckboxBaseComponent 

get checked(): any

Defined in src/components/checkbox/checkbox-base.ts:78

The checked state of the control.

 
set checked(value: boolean): void

Defined in src/components/checkbox/checkbox-base.ts:78

Parameters

  • value: boolean

Returns void

defaultChecked

Section titled "defaultChecked"

Inherited from: IgcCheckboxBaseComponent 

get defaultChecked(): any

Defined in src/internals/mixins/forms/types.ts:139

The initial checked state of the component.

 
set defaultChecked(value: boolean): void

Defined in src/internals/mixins/forms/types.ts:139

Parameters

  • value: boolean

Returns void

form

Section titled "form"

Inherited from: IgcCheckboxBaseComponent

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/internals/mixins/forms/types.ts:48

Returns HTMLFormElement | null

required

Section titled "required"

Inherited from: IgcCheckboxBaseComponent 

get required(): any

Defined in src/internals/mixins/forms/types.ts:151

When set, makes the component a required field for validation.

 
set required(value: boolean): void

Defined in src/internals/mixins/forms/types.ts:151

Parameters

  • value: boolean

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: IgcCheckboxBaseComponent

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/internals/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: IgcCheckboxBaseComponent

Returns a ValidityState object for the element.

 
get validity(): ValidityState

Defined in src/internals/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value"

Inherited from: IgcCheckboxBaseComponent 

get value(): any

Defined in src/components/checkbox/checkbox-base.ts:61

The value of the control.

 
set value(value: string): void

Defined in src/components/checkbox/checkbox-base.ts:61

Parameters

  • value: string

Returns void

willValidate

Section titled "willValidate"

Inherited from: IgcCheckboxBaseComponent

Returns true when the element is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/internals/mixins/forms/types.ts:59

Returns boolean

Methods

Section titled "Methods"

blur

Section titled "blur"

Inherited from: IgcCheckboxBaseComponent

Removes focus from the control.

 
blur(): void

Defined in src/components/checkbox/checkbox-base.ts:106

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: IgcCheckboxBaseComponent

Checks validity and emits invalid when the control is invalid.

 
checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:114

Returns boolean

click

Section titled "click"

Inherited from: IgcCheckboxBaseComponent

Simulates a click on the control.

 
click(): void

Defined in src/components/checkbox/checkbox-base.ts:94

Returns void

focus

Section titled "focus"

Inherited from: IgcCheckboxBaseComponent

Sets focus on the control.

 
focus(options: FocusOptions): void

Defined in src/components/checkbox/checkbox-base.ts:100

Parameters

  • options: FocusOptions

Returns void

reportValidity

Section titled "reportValidity"

Inherited from: IgcCheckboxBaseComponent

Checks validity and shows the browser message when invalid.

 
reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:117

Returns boolean

setCustomValidity

Section titled "setCustomValidity"

Inherited from: IgcCheckboxBaseComponent

Sets a custom message. Invalid while message is not empty.

 
setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:120

Parameters

  • message: string

Returns void