carbon-components-angular

<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>carbon-components-angular documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../styles/style.css"> <link rel="stylesheet" href="../styles/dark.css"> </head> <body> <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none"> <a href="../" class="navbar-brand">carbon-components-angular documentation</a> <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button> </div> <div class="xs-menu menu" id="mobile-menu"> <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu> </div> <div class="container-fluid main"> <div class="row main"> <div class="hidden-xs menu"> <compodoc-menu mode="normal"></compodoc-menu> </div>  <div class="content component"> <div class="content-data"> <ol class="breadcrumb"> <li class="breadcrumb-item">Components</li> <li class="breadcrumb-item" > Radio</li> </ol> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a href="#info" class="nav-link active" role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a> </li> <li class="nav-item"> <a href="#source" class="nav-link" role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a> </li> <li class="nav-item"> <a href="#tree" class="nav-link" role="tab" id="tree-tab" data-bs-toggle="tab" data-link="dom-tree">DOM Tree</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" id="info"><p class="comment"> <h3>File</h3> </p> <p class="comment"> <code>src/radio/radio.component.ts</code> </p> <p class="comment"> <h3>Description</h3> </p> <p class="comment"> <p>class: Radio (extends Checkbox)</p> <p>selector: <code>n-radio</code></p> <p>source: <code>src/forms/radio.component.ts</code></p> <div><pre class="line-numbers"><code class="language-html"> <cds-radio [(ngModel)]="radioState">Radio</cds-radio></code></pre></div><p>Also see: <a href="#cds-radio-group"><code>RadioGroup</code></a></p> </p> <section data-compodoc="block-metadata"> <h3>Metadata</h3> <table class="table table-sm table-hover metadata"> <tbody> <tr> <td class="col-md-3">providers</td> <td class="col-md-9"> <code><a href="../components/Radio.html" target="_self" >{ provide: NG_VALUE_ACCESSOR, useExisting: Radio, multi: true }</a></code> </td> </tr> <tr> <td class="col-md-3">selector</td> <td class="col-md-9"><code>cds-radio, ibm-radio</code></td> </tr> <tr> <td class="col-md-3">template</td> <td class="col-md-9"><pre class="line-numbers"><code class="language-html"><input *ngIf="!skeleton" class="cds--radio-button" type="radio" [checked]="checked" [disabled]="disabled || disabledFromGroup" [name]="name" [id]="id" [required]="required" [attr.value]="value" [attr.aria-labelledby]="ariaLabelledby" (change)="onChange($event)" (click)="onClick($event)"> <div *ngIf="skeleton" class="cds--radio-button cds--skeleton"></div> <label class="cds--radio-button__label" [attr.aria-label]="ariaLabel" [ngClass]="{ 'cds--skeleton': skeleton }" [for]="id" id="label-{{id}}"> <span class="cds--radio-button__appearance"></span> <ng-content></ng-content> </label> </code></pre></td> </tr> </tbody> </table> </section> <section data-compodoc="block-index"> <h3 id="index">Index</h3> <table class="table table-sm table-bordered index-table"> <tbody> <tr> <td class="col-md-4"> <h6><b>Properties</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <span class="modifier">Protected</span> <a href="#_labelledby" >_labelledby</a> </li> <li> <a href="#disabledFromGroup" >disabledFromGroup</a> </li> <li> <span class="modifier"></span> <a href="#hostClass" >hostClass</a> </li> <li> <a href="#radioChangeHandler" >radioChangeHandler</a> </li> <li> <span class="modifier">Static</span> <a href="#radioCount" >radioCount</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Methods</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#onChange" >onChange</a> </li> <li> <a href="#onClick" >onClick</a> </li> <li> <a href="#registerRadioChangeHandler" >registerRadioChangeHandler</a> </li> <li> <a href="#setDisabledFromGroup" >setDisabledFromGroup</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Inputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#ariaLabel" >ariaLabel</a> </li> <li> <a href="#ariaLabelledby" >ariaLabelledby</a> </li> <li> <a href="#checked" >checked</a> </li> <li> <a href="#disabled" >disabled</a> </li> <li> <a href="#id" >id</a> </li> <li> <a href="#labelPlacement" >labelPlacement</a> </li> <li> <a href="#name" >name</a> </li> <li> <a href="#required" >required</a> </li> <li> <a href="#skeleton" >skeleton</a> </li> <li> <a href="#value" >value</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Outputs</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#change" >change</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>HostBindings</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#class.cds--radio-button-wrapper" >class.cds--radio-button-wrapper</a> </li> <li> <a href="#class.cds--radio-button-wrapper--label-left" >class.cds--radio-button-wrapper--label-left</a> </li> </ul> </td> </tr> <tr> <td class="col-md-4"> <h6><b>Accessors</b></h6> </td> </tr> <tr> <td class="col-md-4"> <ul class="index-list"> <li> <a href="#ariaLabelledby" >ariaLabelledby</a> </li> <li> <a href="#labelLeft" >labelLeft</a> </li> </ul> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-inputs"> <h3 id="inputs">Inputs</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="ariaLabel"></a> <b>ariaLabel</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="89" class="link-to-prism">src/radio/radio.component.ts:89</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Used to set the <code>aria-label</code> attribute on the input label.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="ariaLabelledby"></a> <b>ariaLabelledby</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/radio/radio.component.ts:75</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="checked"></a> <b>checked</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/radio/radio.component.ts:67</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="disabled"></a> <b>disabled</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/radio/radio.component.ts:71</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="id"></a> <b>id</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>`radio-${Radio.radioCount++}`</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/radio/radio.component.ts:106</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>The id for the <code>Radio</code>.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="labelPlacement"></a> <b>labelPlacement</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>"right" | "left"</code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>"right"</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="73" class="link-to-prism">src/radio/radio.component.ts:73</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="name"></a> <b>name</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>""</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/radio/radio.component.ts:69</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="required"></a> <b>required</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/radio/radio.component.ts:94</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Sets the HTML required attribute</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="skeleton"></a> <b>skeleton</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/radio/radio.component.ts:102</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Set to <code>true</code> for a loading table.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="value"></a> <b>value</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/radio/radio.component.ts:98</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>The value of the <code>Radio</code>.</p> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-outputs"> <h3 id="outputs">Outputs</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="change"></a> <b>change</b> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code>EventEmitter</code> </td> </tr> <tr> <td class="col-md-2" colspan="2"> <div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/radio/radio.component.ts:110</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>emits when the state of the radio changes</p> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-properties"> <h3>HostBindings</h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="class.cds--radio-button-wrapper"></a> <span class="name"> <span ><b>class.cds--radio-button-wrapper</b></span> <a href="#class.cds--radio-button-wrapper"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>true</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/radio/radio.component.ts:112</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="class.cds--radio-button-wrapper--label-left"></a> <span class="name"> <span ><b>class.cds--radio-button-wrapper--label-left</b></span> <a href="#class.cds--radio-button-wrapper--label-left"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/radio/radio.component.ts:114</a></div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-methods"> <h3 id="methods"> Methods </h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="onChange"></a> <span class="name"> <span ><b>onChange</b></span> <a href="#onChange"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>onChange(event: Event)</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="134" class="link-to-prism">src/radio/radio.component.ts:134</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Synchronizes with the <code>RadioGroup</code> in the event of a changed <code>Radio</code>. Emits the changes of both the <code>RadioGroup</code> and <code>Radio</code>.</p> </div> <div class="io-description"> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> </tr> </thead> <tbody> <tr> <td>event</td> <td> <code>Event</code> </td> <td> No </td> </tr> </tbody> </table> </div> <div> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> <div class="io-description"> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="onClick"></a> <span class="name"> <span ><b>onClick</b></span> <a href="#onClick"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>onClick(event: Event)</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/radio/radio.component.ts:138</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> </tr> </thead> <tbody> <tr> <td>event</td> <td> <code>Event</code> </td> <td> No </td> </tr> </tbody> </table> </div> <div> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> <div class="io-description"> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="registerRadioChangeHandler"></a> <span class="name"> <span ><b>registerRadioChangeHandler</b></span> <a href="#registerRadioChangeHandler"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>registerRadioChangeHandler(fn: (event: <a href="../classes/RadioChange.html">RadioChange</a>) => void)</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="149" class="link-to-prism">src/radio/radio.component.ts:149</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Method called by <code>RadioGroup</code> with a callback function to bubble <code>RadioChange</code> events</p> </div> <div class="io-description"> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> <td>Description</td> </tr> </thead> <tbody> <tr> <td>fn</td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code> </td> <td> No </td> <td> <p>callback that expects a <code>RadioChange</code> as an argument</p> </td> </tr> </tbody> </table> </div> <div> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> <div class="io-description"> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="setDisabledFromGroup"></a> <span class="name"> <span ><b>setDisabledFromGroup</b></span> <a href="#setDisabledFromGroup"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <code>setDisabledFromGroup(disabled: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="153" class="link-to-prism">src/radio/radio.component.ts:153</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> </tr> </thead> <tbody> <tr> <td>disabled</td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code> </td> <td> No </td> </tr> </tbody> </table> </div> <div> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> <div class="io-description"> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-properties"> <h3 id="inputs"> Properties </h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="_labelledby"></a> <span class="name"> <span class="modifier">Protected</span> <span ><b>_labelledby</b></span> <a href="#_labelledby"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>""</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="123" class="link-to-prism">src/radio/radio.component.ts:123</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="disabledFromGroup"></a> <span class="name"> <span ><b>disabledFromGroup</b></span> <a href="#disabledFromGroup"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>false</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/radio/radio.component.ts:121</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Reflects whether or not the input is disabled at <code>RadioGroup</code> level.</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="hostClass"></a> <span class="name"> <span class="modifier"></span> <span ><b>hostClass</b></span> <a href="#hostClass"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>true</code> </td> </tr> <tr> <td class="col-md-4"> <b>Decorators : </b> <br /> <code> @HostBinding('class.cds--radio-button-wrapper')<br /> </code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="112" class="link-to-prism">src/radio/radio.component.ts:112</a></div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="radioChangeHandler"></a> <span class="name"> <span ><b>radioChangeHandler</b></span> <a href="#radioChangeHandler"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>() => {...}</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/radio/radio.component.ts:128</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Handler provided by the <code>RadioGroup</code> to bubble events up</p> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="radioCount"></a> <span class="name"> <span class="modifier">Static</span> <span ><b>radioCount</b></span> <a href="#radioCount"><span class="icon ion-ios-link"></span></a> </span> </td> </tr> <tr> <td class="col-md-4"> <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code> </td> </tr> <tr> <td class="col-md-4"> <i>Default value : </i><code>0</code> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="65" class="link-to-prism">src/radio/radio.component.ts:65</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"><p>Used to dynamically create unique ids for the <code>Radio</code>.</p> </div> </td> </tr> </tbody> </table> </section> <section data-compodoc="block-accessors"> <h3 id="accessors"> Accessors </h3> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="ariaLabelledby"></a> <span class="name"><b>ariaLabelledby</b><a href="#ariaLabelledby"><span class="icon ion-ios-link"></span></a></span> </td> </tr> <tr> <td class="col-md-4"> <span class="accessor"><b>get</b><code>ariaLabelledby()</code></span> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/radio/radio.component.ts:79</a></div> </td> </tr> <tr> <td class="col-md-4"> <span class="accessor"><b>set</b><code>ariaLabelledby(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code></span> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/radio/radio.component.ts:75</a></div> </td> </tr> <tr> <td class="col-md-4"> <div class="io-description"> <b>Parameters :</b> <table class="params"> <thead> <tr> <td>Name</td> <td>Type</td> <td>Optional</td> </tr> </thead> <tbody> <tr> <td>value</td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code> </td> <td> No </td> </tr> </tbody> </table> </div> <div> </div> <div class="io-description"> <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code> </div> </td> </tr> </tbody> </table> <table class="table table-sm table-bordered"> <tbody> <tr> <td class="col-md-4"> <a name="labelLeft"></a> <span class="name"><b>labelLeft</b><a href="#labelLeft"><span class="icon ion-ios-link"></span></a></span> </td> </tr> <tr> <td class="col-md-4"> <span class="accessor"><b>get</b><code>labelLeft()</code></span> </td> </tr> <tr> <td class="col-md-4"> <div class="io-line">Defined in <a href="" data-line="114" class="link-to-prism">src/radio/radio.component.ts:114</a></div> </td> </tr> </tbody> </table> </section> </div> <div class="tab-pane fade tab-source-code" id="source"> <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, Input, HostBinding, Output, EventEmitter } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { RadioChange } from "./radio-change.class"; /** * class: Radio (extends Checkbox) * * selector: `n-radio` * * source: `src/forms/radio.component.ts` * * ```html * <cds-radio [(ngModel)]="radioState">Radio</cds-radio> * ``` * * Also see: [`RadioGroup`](#cds-radio-group) */ @Component({ selector: "cds-radio, ibm-radio", template: ` <input *ngIf="!skeleton" class="cds--radio-button" type="radio" [checked]="checked" [disabled]="disabled || disabledFromGroup" [name]="name" [id]="id" [required]="required" [attr.value]="value" [attr.aria-labelledby]="ariaLabelledby" (change)="onChange($event)" (click)="onClick($event)"> <div *ngIf="skeleton" class="cds--radio-button cds--skeleton"></div> <label class="cds--radio-button__label" [attr.aria-label]="ariaLabel" [ngClass]="{ 'cds--skeleton': skeleton }" [for]="id" id="label-{{id}}"> <span class="cds--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() labelPla