Sets/gets the value of the aria-label
attribute.
<igx-checkbox aria-label="Checkbox1"></igx-checkbox>
let ariaLabel = this.checkbox.ariaLabel;
Sets/gets the aria-labelledby
attribute.
If not set, the aria-labelledby
will be equal to the value of labelId
attribute.
<igx-checkbox aria-labelledby="Checkbox1"></igx-checkbox>
let ariaLabelledBy = this.checkbox.ariaLabelledBy;
Readonly
changeAn event that is emitted after the checkbox state is changed.
Provides references to the IgxCheckboxComponent
and the checked
property as event arguments.
Returns the class of the switch component.
let switchClass = this.switch.cssClass;
Enables/Disables the ripple effect.
If not set, disableRipple
will have value false
.
<igx-checkbox [disableRipple]="true"></igx-checkbox>
let isRippleDisabled = this.checkbox.desableRipple;
Sets/gets whether the checkbox should disable all css transitions.
Default value is false
.
<igx-checkbox [disableTransitions]="true"></igx-checkbox>
let disableTransitions = this.checkbox.disableTransitions;
Sets/gets the disabled
attribute.
Default value is false
.
<igx-switch disabled><igx-switch>
Sets/gets whether the switch component is on focus.
Default value is false
.
this.switch.focused = true;
Sets/gets the id
of the checkbox component.
If not set, the id
of the first checkbox component will be "igx-checkbox-0"
.
<igx-checkbox id="my-first-checkbox"></igx-checkbox>
let checkboxId = this.checkbox.id;
Sets/gets the checkbox indeterminate visual state.
Default value is false
;
<igx-checkbox [indeterminate]="true"></igx-checkbox>
let isIndeterminate = this.checkbox.indeterminate;
Sets/gets whether the switch component is invalid.
Default value is false
.
<igx-switch invalid></igx-switch>
let isInvalid = this.switch.invalid;
Sets/gets the id of the label
element.
If not set, the id of the label
in the first checkbox component will be "igx-checkbox-0-label"
.
<igx-checkbox labelId="Label1"></igx-checkbox>
let labelId = this.component.labelId;
Sets/gets the position of the label
.
If not set, the labelPosition
will have value "after"
.
<igx-checkbox labelPosition="before"></igx-checkbox>
let labelPosition = this.checkbox.labelPosition;
Sets/gets the name
attribute.
<igx-checkbox name="Checkbox1"></igx-checkbox>
let name = this.checkbox.name;
Returns reference to the native checkbox element.
let checkboxElement = this.component.checkboxElement;
Returns reference to the native label element.
@example
let labelElement = this.component.nativeLabel;
Returns reference to the label placeholder element.
@example
let labelPlaceholder = this.component.placeholderLabel;
Sets/gets whether the checkbox is readonly.
Default value is false
.
<igx-checkbox [readonly]="true"></igx-checkbox>
let readonly = this.checkbox.readonly;
Sets/gets the value of the tabindex
attribute.
<igx-checkbox [tabindex]="1"></igx-checkbox>
let tabIndex = this.checkbox.tabindex;
Sets/gets the value
attribute.
<igx-checkbox [value]="'CheckboxValue'"></igx-checkbox>
let value = this.checkbox.value;
Sets/gets whether the checkbox is checked.
Default value is false
.
<igx-checkbox [checked]="true"></igx-checkbox>
let isChecked = this.checkbox.checked;
Sets/gets whether the switch is on or off. Default value is 'false'.
<igx-switch [checked]="true"></igx-switch>
Returns reference to the nativeElement
of the igx-checkbox/igx-switch.
let nativeElement = this.component.nativeElement;
Sets/gets whether the checkbox is required.
If not set, required
will have value false
.
<igx-checkbox required></igx-checkbox>
let isRequired = this.checkbox.required;
The Switch component is a binary choice selection component.
Igx Module
IgxSwitchModule
Igx Theme
igx-switch-theme, igx-tooltip-theme
Igx Keywords
switch, states, tooltip
Igx Group
Data Entry & Display
Remarks
The Ignite UI Switch lets the user toggle between on/off or true/false states.
Example