### File

`src/radio/radio.component.ts`

### Description

class: Radio (extends Checkbox)

selector: `n-radio`

source: `src/forms/radio.component.ts`

     * <ibm-radio [(ngModel)]="radioState">Radio</ibm-radio>
     *

Also see: `RadioGroup`

### Example

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: Radio, multi: true }`
selector | `ibm-radio`

template

    <input
    	*ngIf="!skeleton"
    	class="bx--radio-button"
    	type="radio"
    	[checked]="checked"
    	[disabled]="disabled"
    	[name]="name"
    	[id]="id"
    	[required]="required"
    	[value]="value"
    	[attr.aria-labelledby]="ariaLabelledby"
    	(change)="onChange($event)">
    <div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
    <label
    	class="bx--radio-button__label"
    	[ngClass]="{
    		'bx--skeleton': skeleton
    	}"
    	[for]="id"
    	id="label-{{id}}">
    	<span class="bx--radio-button__appearance"></span>
    	<ng-content></ng-content>
    </label>

### Index

###### Properties

- Protected _labelledby
- radioChangeHandler
- Static radioCount

###### Methods

- onChange
- registerRadioChangeHandler

###### Inputs

- ariaLabelledby
- checked
- disabled
- id
- labelPlacement
- name
- required
- skeleton
- value

###### Outputs

- change

###### HostBindings

- attr.role
- class.bx--radio-button-wrapper
- class.bx--radio-button-wrapper--label-left

###### Accessors

- ariaLabelledby

### Inputs

`ariaLabelledby` | Type : `string`
Defined in src/radio/radio.component.ts:84

`checked` | Default value : `false`
Defined in src/radio/radio.component.ts:76

`disabled` | Default value : `false`
Defined in src/radio/radio.component.ts:80

`id` | The id for the `Radio`. Default value : ``radio-${Radio.radioCount++}``
Defined in src/radio/radio.component.ts:109

`labelPlacement` | Type : `"right" | "left"` Default value : `"right"`
Defined in src/radio/radio.component.ts:82

`name` | Default value : `""`
Defined in src/radio/radio.component.ts:78

`required` | Sets the HTML required attribute Default value : `false`
Defined in src/radio/radio.component.ts:97

`skeleton` | Set to `true` for a loading table. Default value : `false`
Defined in src/radio/radio.component.ts:105

`value` | The value of the `Radio`. Default value : `""`
Defined in src/radio/radio.component.ts:101

### Outputs

`change` | emits when the state of the radio changes `$event` Type: `EventEmitter`
Defined in src/radio/radio.component.ts:113

### HostBindings

attr.role
`attr.role: ```
Default value : `"radio"`
Defined in src/radio/radio.component.ts:117
Binds 'radio' value to the role attribute for `Radio`.

class.bx--radio-button-wrapper
`class.bx--radio-button-wrapper: ```
Default value : `true`
Defined in src/radio/radio.component.ts:119

class.bx--radio-button-wrapper--label-left
`class.bx--radio-button-wrapper--label-left: ```
Defined in src/radio/radio.component.ts:121

### Methods

onChange
`onChange(event: Event)`
Defined in src/radio/radio.component.ts:136

Synchronizes with the `RadioGroup` in the event of a changed `Radio`. Emits the changes of both the `RadioGroup` and `Radio`.

Parameters :

Name | Type | Optional
event | `Event` | No

Returns : `void`

registerRadioChangeHandler
`registerRadioChangeHandler(fn: (event: RadioChange) => void)`
Defined in src/radio/radio.component.ts:148

Method called by `RadioGroup` with a callback function to bubble `RadioChange` events

Parameters :

Name | Type | Optional | Description
fn | `function` | No | `callback that expects a `RadioChange` as an argument`

Returns : `void`

### Properties

Protected _labelledby
`_labelledby: `string``
Type : `string`
Default value : `""`
Defined in src/radio/radio.component.ts:125

radioChangeHandler
`radioChangeHandler: ```
Default value : `(event: RadioChange) => {}`
Defined in src/radio/radio.component.ts:130
Handler provided by the `RadioGroup` to bubble events up

Static radioCount
`radioCount: `number``
Type : `number`
Default value : `0`
Defined in src/radio/radio.component.ts:74
Used to dynamically create unique ids for the `Radio`.

### Accessors

ariaLabelledby
get `ariaLabelledby()`
Defined in src/radio/radio.component.ts:88
set `ariaLabelledby(value: string)`
Defined in src/radio/radio.component.ts:84

Parameters :

Name | Type | Optional
value | `string` | No

Returns : `void`

    import {
    	ChangeDetectorRef,
    	Component,
    	ElementRef,
    	Input,
    	OnInit,
    	Optional,
    	Renderer2,
    	HostBinding,
    	Output,
    	EventEmitter
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";
    import { Checkbox } from "../checkbox/checkbox.component";
    import { RadioGroup, RadioChange } from "./radio-group.component";

    /**
     * class: Radio (extends Checkbox)
     *
     * selector: `n-radio`
     *
     * source: `src/forms/radio.component.ts`
     *
     * ```html
     * <ibm-radio [(ngModel)]="radioState">Radio</ibm-radio>
     * ```
     *
     * Also see: [`RadioGroup`](#ibm-radio-group)
     *
     * @export
     * @class Radio
     * @extends {Checkbox}
     * @implements {OnInit}
     */
    @Component({
    	selector: "ibm-radio",
    	template: `
    		<input
    			*ngIf="!skeleton"
    			class="bx--radio-button"
    			type="radio"
    			[checked]="checked"
    			[disabled]="disabled"
    			[name]="name"
    			[id]="id"
    			[required]="required"
    			[value]="value"
    			[attr.aria-labelledby]="ariaLabelledby"
    			(change)="onChange($event)">
    		<div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
    		<label
    			class="bx--radio-button__label"
    			[ngClass]="{
    				'bx--skeleton': skeleton
    			}"
    			[for]="id"
    			id="label-{{id}}">
    			<span class="bx--radio-button__appearance"></span>
    			<ng-content></ng-content>
    		</label>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: Radio,
    			multi: true
    		}
    	]
    })
    export class Radio {
    	/**
    	 * Used to dynamically create unique ids for the `Radio`.
    	 */
    	static radioCount = 0;

    	@Input() checked = false;

    	@Input() name = "";

    	@Input() disabled = false;

    	@Input() labelPlacement: "right" | "left" =  "right";

    	@Input() set ariaLabelledby(value: string) {
    		this._labelledby = value;
    	}

    	get ariaLabelledby() {
    		if (this._labelledby) {
    			return this._labelledby;
    		}
    		return `label-${this.id}`;
    	}
    	/**
    	 * Sets the HTML required attribute
    	 */
    	@Input() required = false;
    	/**
    	 * The value of the `Radio`.
    	 */
    	@Input() value = "";
    	/**
    	 * Set to `true` for a loading table.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * The id for the `Radio`.
    	 */
    	@Input() id = `radio-${Radio.radioCount++}`;
    	/**
    	 * emits when the state of the radio changes
    	 */
    	@Output() change = new EventEmitter<RadioChange>();
    	/**
    	 * Binds 'radio' value to the role attribute for `Radio`.
    	 */
    	@HostBinding("attr.role") role = "radio";

    	@HostBinding("class.bx--radio-button-wrapper") hostClass = true;

    	@HostBinding("class.bx--radio-button-wrapper--label-left") get labelLeft() {
    		return this.labelPlacement === "left";
    	}

    	protected _labelledby = "";

    	/**
    	 * Handler provided by the `RadioGroup` to bubble events up
    	 */
    	radioChangeHandler = (event: RadioChange) => {};

    	/**
    	 * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
    	 * Emits the changes of both the `RadioGroup` and `Radio`.
    	 */
    	onChange(event: Event) {
    		event.stopPropagation();
    		this.checked = (event.target as HTMLInputElement).checked;
    		const radioEvent = new RadioChange(this, this.value);
    		this.change.emit(radioEvent);
    		this.radioChangeHandler(radioEvent);
    	}

    	/**
    	 * Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
    	 * @param fn callback that expects a `RadioChange` as an argument
    	 */
    	registerRadioChangeHandler(fn: (event: RadioChange) => void) {
    		this.radioChangeHandler = fn;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""