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 checkbox component.
let class = this.checkbox.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 whether the checkbox component is on focus.
Default value is false
.
this.checkbox.focused = true;
let isFocused = this.checkbox.focused;
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 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.checkbox.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.checkbox.checkboxElement;
Returns reference to the native label element.
@example
let labelElement = this.checkbox.nativeLabel;
Returns reference to the label placeholder element.
@example
let labelPlaceholder = this.checkbox.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 checkbox is disabled.
Default value is false
.
<igx-checkbox disabled></igx-checkbox>
let isDisabled = this.checkbox.disabled;
Sets/gets whether the checkbox is invalid.
Default value is false
.
<igx-checkbox invalid></igx-checkbox>
let isInvalid = this.checkbox.invalid;
Returns reference to the nativeElement
of the igx-checkbox.
let nativeElement = this.checkbox.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;
Allows users to make a binary choice for a certain condition.
Igx Module
IgxCheckboxModule
Igx Theme
igx-checkbox-theme
Igx Keywords
checkbox, label
Igx Group
Data entry and display
Remarks
The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly to the native browser checkbox.
Example