Ignite UI for Angular Radio Button - Documentation

The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side.

Example:

<igx-radio>
  Simple radio button
</igx-radio>

Constructors

Section titled "Constructors"

IgxRadioComponent 

new IgxRadioComponent(): IgxRadioComponent

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:232

Returns IgxRadioComponent

Properties

Section titled "Properties"

ariaLabel

Section titled "ariaLabel"

Inherited from: CheckboxBaseDirective

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

 
ariaLabel: string | null = null

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:230

Example

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

ariaLabelledBy

Section titled "ariaLabelledBy"

Inherited from: CheckboxBaseDirective

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

 
ariaLabelledBy: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:216

Example

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

change

Section titled "change"

Inherited from: CheckboxBaseDirective

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

 
change: EventEmitter<IChangeCheckboxEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:31

cssClass

Section titled "cssClass"

Returns the class of the radio component.

let radioClass = this.radio.cssClass;
cssClass: string = 'igx-radio'

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:65

disableRipple

Section titled "disableRipple"

Inherited from: CheckboxBaseDirective

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

 
disableRipple: boolean = false

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:201

Example

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

focused

Section titled "focused"

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

this.radio.focus = true;
let isFocused =  this.radio.focused;
focused: boolean = false

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:148

id

Section titled "id"

Inherited from: CheckboxBaseDirective

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

 
id: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:118

Example

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

indeterminate

Section titled "indeterminate"

Inherited from: CheckboxBaseDirective 

indeterminate: boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:65

invalid

Section titled "invalid"

Sets/gets whether the radio button is invalid. Default value is false.

<igx-radio invalid></igx-radio>
let isInvalid =  this.radio.invalid;
invalid: boolean = false

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:133

labelId

Section titled "labelId"

Inherited from: CheckboxBaseDirective

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

 
labelId: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:132

Example

<igx-checkbox labelId="Label1"></igx-checkbox>
let labelId =  this.component.labelId;

labelPosition

Section titled "labelPosition"

Inherited from: CheckboxBaseDirective

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

 
labelPosition: string = LabelPosition.AFTER

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:186

Example

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

name

Section titled "name"

Inherited from: CheckboxBaseDirective

Sets/gets the name attribute.

 
name: string

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:158

Example

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

nativeInput

Section titled "nativeInput"

Inherited from: CheckboxBaseDirective

Returns reference to the native checkbox element.

 
nativeInput: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:49

Example

let checkboxElement =  this.component.checkboxElement;

nativeLabel

Section titled "nativeLabel"

Inherited from: CheckboxBaseDirective

Returns reference to the native label element.

@example
let labelElement =  this.component.nativeLabel;
nativeLabel: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:60

ngControl

Section titled "ngControl"

Inherited from: CheckboxBaseDirective 

ngControl: NgControl | null

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:23

placeholderLabel

Section titled "placeholderLabel"

Inherited from: CheckboxBaseDirective

Returns reference to the label placeholder element.

@example
let labelPlaceholder =  this.component.placeholderLabel;
placeholderLabel: ElementRef

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:102

readonly

Section titled "readonly"

Inherited from: CheckboxBaseDirective 

readonly: boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:64

tabindex

Section titled "tabindex"

Inherited from: CheckboxBaseDirective

Sets/gets the value of the tabindex attribute.

 
tabindex: number

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:171

Example

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

value

Section titled "value"

Inherited from: CheckboxBaseDirective

Sets/gets the value attribute.

 
value: any

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:145

Example

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

Accessors

Section titled "Accessors"

checked

Section titled "checked" 
get checked(): boolean

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:84

Returns boolean

Sets/gets the checked attribute. Default value is false.

<igx-radio [checked]="true"></igx-radio>
let isChecked =  this.radio.checked;
set checked(value: boolean): void

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:81

Parameters

  • value: boolean

Returns void

disabled

Section titled "disabled"

Sets/gets the disabled attribute. Default value is false.

<igx-radio disabled></igx-radio>
let isDisabled =  this.radio.disabled;
get disabled(): boolean

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:102

Returns boolean 

set disabled(value: boolean): void

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:105

Parameters

  • value: boolean

Returns void

nativeElement

Section titled "nativeElement"

Inherited from: CheckboxBaseDirective

Returns reference to the nativeElement of the igx-checkbox/igx-switch.

 
get nativeElement(): any

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:89

Example

let nativeElement = this.component.nativeElement;

Returns any

required

Section titled "required"

Inherited from: CheckboxBaseDirective

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

 
get required(): boolean

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:251

Example

<igx-checkbox required></igx-checkbox>
let isRequired = this.checkbox.required;

Returns boolean 

set required(value: boolean): void

Defined in projects/igniteui-angular/directives/src/directives/checkbox/checkbox-base.directive.ts:254

Parameters

  • value: boolean

Returns void

Methods

Section titled "Methods"

deselect

Section titled "deselect"

Deselects the current radio button.

this.radio.deselect();
deselect(): void

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:197

Returns void

select

Section titled "select"

Selects the current radio button.

this.radio.select();
select(): void

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:177

Returns void

writeValue

Section titled "writeValue"

Checks whether the provided value is consistent to the current radio button. If it is, the checked attribute will have value true;

this.radio.writeValue('radioButtonValue');
writeValue(value: any): void

Defined in projects/igniteui-angular/radio/src/radio/radio.component.ts:210

Parameters

  • value: any

Returns void