Class IgxCheckboxComponent

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

<igx-checkbox [checked]="true">
simple checkbox
</igx-checkbox>

Hierarchy

Hierarchy

  • IgxCheckboxComponent

Implements

  • ControlValueAccessor
  • EditorProvider

Constructors

Properties

ariaLabel: string = null

Sets/gets the value of the aria-label attribute.

Example

<igx-checkbox aria-label = "Checkbox1"></igx-checkbox>
let ariaLabel = this.checkbox.ariaLabel;
ariaLabelledBy: string = ...

Sets/gets the aria-labelledby attribute. If not set, the aria-labelledby will be equal to the value of labelId attribute.

Example

<igx-checkbox aria-labelledby = "Checkbox1"></igx-checkbox>
let ariaLabelledBy =  this.checkbox.ariaLabelledBy;
change: EventEmitter<IChangeCheckboxEventArgs> = ...

An event that is emitted after the checkbox state is changed. Provides references to the IgxCheckboxComponent and the checked property as event arguments.

cssClass: string = 'igx-checkbox'

Returns the class of the checkbox component.

Example

let class =  this.checkbox.cssClass;
disableRipple: boolean = false

Enables/Disables the ripple effect. If not set, disableRipple will have value false.

Example

<igx-checkbox [disableRipple] = "true"></igx-checkbox>
let isRippleDisabled = this.checkbox.desableRipple;
disableTransitions: boolean = false

Sets/gets whether the checkbox should disable all css transitions. Default value is false.

Example

<igx-checkbox [disableTransitions]="true"></igx-checkbox>
let disableTransitions = this.checkbox.disableTransitions;
focused: boolean = false

Sets/gets whether the checkbox component is on focus. Default value is false.

Example

this.checkbox.focused =  true;
let isFocused =  this.checkbox.focused;
id: string = ...

Sets/gets the id of the checkbox component. If not set, the id of the first checkbox component will be "igx-checkbox-0".

Example

<igx-checkbox id="my-first-checkbox"></igx-checkbox>
let checkboxId =  this.checkbox.id;
indeterminate: boolean = false

Sets/gets the checkbox indeterminate visual state. Default value is false;

Example

<igx-checkbox [indeterminate] = "true"></igx-checkbox>
let isIndeterminate = this.checkbox.indeterminate;
labelId: string = ...

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".

Example

<igx-checkbox labelId = "Label1"></igx-checkbox>
let labelId =  this.checkbox.labelId;
labelPosition: string = LabelPosition.AFTER

Sets/gets the position of the label. If not set, the labelPosition will have value "after".

Example

<igx-checkbox labelPosition = "before"></igx-checkbox>
let labelPosition =  this.checkbox.labelPosition;
name: string

Sets/gets the name attribute.

Example

<igx-checkbox name = "Checkbox1"></igx-checkbox>
let name =  this.checkbox.name;
nativeCheckbox: ElementRef<any>

Returns reference to the native checkbox element.

Example

let checkboxElement =  this.checkbox.checkboxElement;
nativeLabel: ElementRef<any>

Returns reference to the native label element.


@example
let labelElement = this.checkbox.nativeLabel;
placeholderLabel: ElementRef<any>

Returns reference to the label placeholder element.


@example
let labelPlaceholder = this.checkbox.placeholderLabel;
readonly: boolean = false

Sets/gets whether the checkbox is readonly. Default value is false.

Example

<igx-checkbox [readonly]="true"></igx-checkbox>
let readonly = this.checkbox.readonly;
tabindex: number = null

Sets/gets the value of the tabindex attribute.

Example

<igx-checkbox [tabindex] = "1"></igx-checkbox>
let tabIndex =  this.checkbox.tabindex;
value: any

Sets/gets the value attribute.

Example

<igx-checkbox [value] = "'CheckboxValue'"></igx-checkbox>
let value =  this.checkbox.value;

Accessors