Class IgxCheckboxComponent

Ignite UI for Angular Checkbox - Documentation

The Ignite UI Checkbox is a selection control that allows users to make a binary choice. It behaves similarly to the native browser checkbox.

Example:

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

Hierarchy

  • IgxCheckboxComponent

Implements

  • ControlValueAccessor
  • EditorProvider

Properties

ariaLabel

ariaLabel: string | null = null

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

<igx-checkbox aria-label = "Checkbox1"></igx-checkbox>
let ariaLabel = this.checkbox.aruaLabel;
memberof

IgxCheckboxComponent

ariaLabelledBy

ariaLabelledBy: string = this.labelId

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;
memberof

IgxCheckboxComponent

change

change: EventEmitter<IChangeCheckboxEventArgs> = new 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.

memberof

IgxCheckboxComponent

checked

checked: boolean = false

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

<igx-checkbox [checked] = "true"></igx-checkbox>
let isChecked =  this.checkbox.checked;
memberof

IgxCheckboxComponent

cssClass

cssClass: string = "igx-checkbox"

Returns the class of the checkbox component.

let class =  this.checkbox.cssClass;
memberof

IgxCheckboxComponent

disableRipple

disableRipple: boolean = false

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

<igx-checkbox [disableRipple] = "true"></igx-checkbox>
let isRippleDisabled = this.checkbox.desableRipple;
memberof

IgxCheckboxComponent

disableTransitions

disableTransitions: boolean = false

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;
memberof

IgxCheckboxComponent

disabled

disabled: boolean = false

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

<igx-checkbox [disabled] = "true"></igx-checkbox>
let isDesabled = this.checkbox.disabled;
memberof

IgxCheckboxComponent

focused

focused: boolean = false

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

this.checkbox.focused =  true;
let isFocused =  this.checkbox.focused;
memberof

IgxCheckboxComponent

id

id: string = `igx-checkbox-${nextId++}`

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;
memberof

IgxCheckboxComponent

indeterminate

indeterminate: boolean = false

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

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

IgxCheckboxComponent

labelId

labelId: string = `${this.id}-label`

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;
memberof

IgxCheckboxComponent

labelPosition

labelPosition: LabelPosition | string = LabelPosition.AFTER

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;
memberof

IgxCheckboxComponent

name

name: string

Sets/gets the name attribute.

<igx-checkbox name = "Checkbox1"></igx-checkbox>
let name =  this.checkbox.name;
memberof

IgxCheckboxComponent

nativeCheckbox

nativeCheckbox: ElementRef

Returns reference to the native checkbox element.

let checkboxElement =  this.checkbox.checkboxElement;
memberof

IgxSwitchComponent

nativeLabel

nativeLabel: any

Returns reference to the native label element.

let labelElement =  this.checkbox.nativeLabel;
memberof

IgxSwitchComponent

placeholderLabel

placeholderLabel: any

Returns reference to the label placeholder element.

let labelPlaceholder =  this.checkbox.placeholderLabel;
memberof

IgxSwitchComponent

required

required: boolean = false

Sets/gets whether the checkbox is required. If not set, required will have value false.

<igx-checkbox [required] = "true"></igx-checkbox>
let isRequired =  this.checkbox.required;
memberof

IgxCheckboxComponent

tabindex

tabindex: number = null

Sets/gets the value of the tabindex attribute.

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

IgxCheckboxComponent

value

value: any

Sets/gets the value attribute.

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

IgxCheckboxComponent

Methods

toggle

  • toggle(): void