1import{a as ye}from"./chunk-MNZ2BLO4.js";import{a as R}from"./chunk-TDKEVZ4A.js";import{a as ve}from"./chunk-OOV4P5UE.js";import"./chunk-YLGERXK5.js";import{a as w}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{b as ge}from"./chunk-7ZGOLTZD.js";import{a as C,b as xe,c as he,d as Se}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import{a as E}from"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{$ as c,$c as U,Ab as m,Bb as p,Ca as k,Cb as u,Da as I,Eh as se,Fh as ce,Ga as L,Gh as me,Ha as V,Hh as pe,Ih as ue,Kg as $,Lg as ee,Mg as te,Ng as ie,Oc as z,Og as re,Pg as ne,Qg as ae,Rc as O,Rg as le,Ta as o,Tc as F,Td as J,U as D,Ua as e,Va as i,Vc as H,Wa as n,Wc as P,Yc as A,Zd as X,_ as s,_d as Z,ad as Q,bb as W,cd as j,ch as oe,ck as be,d as v,dh as de,f as S,h as g,jb as B,kb as M,kd as Y,lb as T,md as G,od as K,pc as q,qb as N,ra as l,tb as t,ud as f}from"./chunk-MFI2B7BD.js";var fe={};S(fe,{default:()=>Ae});var Ae,we=v(()=>{Ae='<input type="radio" clrRadio value="option1" />'});var Ee={};S(Ee,{default:()=>Ue});var Ue,Ce=v(()=>{Ue=`<clr-radio-container> 2 <label>Disabled radio example</label> 3 <clr-radio-wrapper> 4 <input type="radio" clrRadio name="options" value="option1" [(ngModel)]="options" disabled /> 5 <label>Option 1</label> 6 </clr-radio-wrapper> 7 <clr-radio-wrapper> 8 <input type="radio" clrRadio name="options" value="option2" [(ngModel)]="options" disabled /> 9 <label>Option 2</label> 10 </clr-radio-wrapper> 11 <clr-control-helper>Helper text</clr-control-helper> 12</clr-radio-container>`});var Re={};S(Re,{default:()=>Qe});var Qe,Me=v(()=>{Qe=`<clr-radio-container> 13 <label>Full radio</label> 14 <clr-radio-wrapper> 15 <input type="radio" clrRadio name="options" required value="option1" [(ngModel)]="options" /> 16 <label>Option 1</label> 17 </clr-radio-wrapper> 18 <clr-radio-wrapper> 19 <input type="radio" clrRadio name="options" required value="option2" [(ngModel)]="options" /> 20 <label>Option 2</label> 21 </clr-radio-wrapper> 22 <clr-control-helper>Helper text</clr-control-helper> 23 <clr-control-error>This field is required!</clr-control-error> 24</clr-radio-container>`});var Te={};S(Te,{default:()=>je});var je,_e=v(()=>{je=`<clr-radio-container clrInline> 25 <label>Inline radio example</label> 26 <clr-radio-wrapper> 27 <input type="radio" clrRadio name="options" required value="option1" [(ngModel)]="options" /> 28 <label>Option 1</label> 29 </clr-radio-wrapper> 30 <clr-radio-wrapper> 31 <input type="radio" clrRadio name="options" required value="option2" [(ngModel)]="options" /> 32 <label>Option 2</label> 33 </clr-radio-wrapper> 34 <clr-control-helper>Helper text</clr-control-helper> 35 <clr-control-error>This field is required!</clr-control-error> 36</clr-radio-container>`});var De={};S(De,{default:()=>Ye});var Ye,ke=v(()=>{Ye=`<clr-radio-wrapper> 37 <input type="radio" clrRadio value="option1" name="options" /> 38 <label>Option 1</label> 39</clr-radio-wrapper> 40<clr-radio-wrapper> 41 <input type="radio" clrRadio value="option2" name="options" /> 42 <label>Option 2</label> 43</clr-radio-wrapper>`});var Ie={};S(Ie,{default:()=>Ge});var Ge,Le=v(()=>{Ge=`<div class="clr-radio-wrapper"> 44 <input type="radio" id="radio1" name="radio-basic" value="option1" class="clr-radio" /> 45 <label for="radio1" class="clr-control-label">My choice</label> 46</div>`});var Ve={};S(Ve,{default:()=>Ke});var Ke,We=v(()=>{Ke=`<div class="clr-form-control clr-form-control-disabled"> 47 <label class="clr-control-label">Disabled radio example</label> 48 <div class="clr-control-container"> 49 <div class="radio"> 50 <input type="radio" id="radio10" name="radio-error" value="option1" class="clr-radio" disabled /> 51 <label for="radio10" class="clr-control-label">option 1</label> 52 </div> 53 <div class="clr-radio-wrapper"> 54 <input type="radio" id="radio11" name="radio-error" value="option2" class="clr-radio" disabled /> 55 <label for="radio11" class="clr-control-label">option 2</label> 56 </div> 57 <div class="clr-radio-wrapper"> 58 <input type="radio" id="radio12" name="radio-error" value="option3" class="clr-radio" disabled /> 59 <label for="radio12" class="clr-control-label">option 3</label> 60 </div> 61 <div class="clr-subtext-wrapper error"> 62 <cds-icon class="clr-validate-icon" shape="error-standard" status="danger"></cds-icon>
63 <span class="clr-subtext">Error message</span> 64 </div> 65 </div> 66</div>`});var Be={};S(Be,{default:()=>Je});var Je,Ne=v(()=>{Je=`<div class="clr-form-control"> 67 <label class="clr-control-label">Basic radio</label> 68 <div class="clr-control-container clr-error"> 69 <div class="clr-radio-wrapper"> 70 <input type="radio" id="vertical-radio1" name="radio-error" value="option1" class="clr-radio" /> 71 <label for="vertical-radio1" class="clr-control-label">option 1</label> 72 </div> 73 <div class="clr-radio-wrapper"> 74 <input type="radio" id="vertical-radio2" name="radio-error" value="option2" class="clr-radio" /> 75 <label for="vertical-radio2" class="clr-control-label">option 2</label> 76 </div> 77 <div class="clr-radio-wrapper"> 78 <input type="radio" id="vertical-radio3" name="radio-error" value="option3" class="clr-radio" /> 79 <label for="vertical-radio3" class="clr-control-label">option 3</label> 80 </div> 81 <div class="clr-subtext-wrapper"> 82 <span class="clr-subtext">Helper Text</span> 83 </div> 84 <div class="clr-subtext-wrapper error"> 85 <cds-icon class="clr-validate-icon" shape="error-standard" status="danger"></cds-icon> 86 <span class="clr-subtext">Error message</span> 87 </div> 88 </div> 89</div>`});var qe={};S(qe,{default:()=>Xe});var Xe,ze=v(()=>{Xe=`<div class="clr-form-control"> 90 <label class="clr-control-label">Full radio</label> 91 <div class="clr-control-container"> 92 <div class="clr-radio-wrapper"> 93 <input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio" /> 94 <label for="vertical-radio1" class="clr-control-label">option 1</label> 95 </div> 96 <div class="clr-radio-wrapper"> 97 <input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio" /> 98 <label for="vertical-radio2" class="clr-control-label">option 2</label> 99 </div> 100 <div class="clr-radio-wrapper"> 101 <input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio" /> 102 <label for="vertical-radio3" class="clr-control-label">option 3</label> 103 </div> 104 <div class="clr-subtext-wrapper error"> 105 <cds-icon class="clr-validate-icon" shape="error-standard" status="danger"></cds-icon> 106 <span class="clr-subtext">Error message</span> 107 </div> 108 </div> 109</div>`});var Oe={};S(Oe,{default:()=>Ze});var Ze,Fe=v(()=>{Ze=`<div class="clr-form-control"> 110 <label class="clr-control-label">Inline radio example</label> 111 <div class="clr-control-container clr-control-inline"> 112 <div class="clr-radio-wrapper"> 113 <input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio" /> 114 <label for="vertical-radio1" class="clr-control-label">option 1</label> 115 </div> 116 <div class="clr-radio-wrapper"> 117 <input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio" /> 118 <label for="vertical-radio2" class="clr-control-label">option 2</label> 119 </div> 120 <div class="clr-radio-wrapper"> 121 <input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio" /> 122 <label for="vertical-radio3" class="clr-control-label">option 3</label> 123 </div> 124 <div class="clr-subtext-wrapper error"> 125 <cds-icon class="clr-validate-icon" shape="error-standard" status="danger"></cds-icon> 126 <span class="clr-subtext">Error message</span> 127 </div> 128 </div> 129</div>`});var He={};S(He,{default:()=>$e});var $e,Pe=v(()=>{$e=`<div class="clr-form-control"> 130 <label class="clr-control-label">Basic radio</label> 131 <div class="clr-control-container clr-success"> 132 <div class="clr-radio-wrapper"> 133 <input type="radio" id="success-radio1" name="radio-success" value="option1" class="clr-radio" /> 134 <label for="success-radio1" class="clr-control-label">option 1</label> 135 </div> 136 <div class="clr-radio-wrapper"> 137 <input type="radio" id="success-radio2" name="radio-success" value="option2" class="clr-radio" /> 138 <label for="success-radio2" class="clr-control-label">option 2</label> 139 </div> 140 <div class="clr-radio-wrapper"> 141 <input type="radio" id="success-radio3" name="radio-success" value="option3" class="clr-radio" /> 142 <label for="success-radio3" class="clr-control-label">option 3</label> 143 </div> 144 <div class="clr-subtext-wrapper">
145 <span class="clr-subtext">Helper Text</span> 146 </div> 147 <div class="clr-subtext-wrapper success"> 148 <cds-icon class="clr-validate-icon" shape="success-standard" status="success"></cds-icon> 149 <span class="clr-subtext">Success message</span> 150 </div> 151 </div> 152</div>`});var tt=["successRadio"],it=["errorRadio"];function rt(b,ht){b&1&&(e(0,"clr-control-error"),t(1,"Size required"),i())}var nt=(we(),g(fe)),at=(Ce(),g(Ee)),lt=(Me(),g(Re)),ot=(_e(),g(Te)),dt=(ke(),g(De)),st=(Le(),g(Ie)),ct=(We(),g(Ve)),mt=(Ne(),g(Be)),pt=(ze(),g(qe)),ut=(Fe(),g(Oe)),bt=(Pe(),g(He)),xt=` 153import { Component } from '@angular/core'; 154import { FormsModule } from '@angular/forms'; 155import { ClarityModule } from '@clr/angular'; 156 157@Component({ 158 selector: 'app-example', 159 templateUrl: './example.component.html', 160 styleUrl: './example.component.scss', 161 162 // Load all components for demo purposes. 163 // Don't do this in a real application. Load just the components you need so that your bundle is smaller. 164 imports: [ClarityModule, FormsModule], 165}) 166export class ExampleComponent { 167 options = ''; 168} 169`,_=(()=>{class b extends Se{constructor(){super("radio"),this.canNestComponents="Spinner",this.cannotNestComponents="Alert, Accordion, Button, Button Group, Card, Checkbox, Combobox, Datagrid, Datalist, Date Picker, Dropdown, File Picker, Header, Input, Label, List, Login Page, Modal, Password, Progress Bar, Radio Button, Range Input, Select, Side Panel, Signpost, Stack View, Stepper, Table, Tabs, Textarea, Toggle Switch, Tooltip, Timeline, Tree View, Vertical Nav, Wizard",this.conditionalNesting=[{component:"Icon, Label",description:"Yes, non-clickable"},{component:"Badge",description:"Maybe, check your design team for assistance"}],this.patternLinks=[ye],this.exampleOne="",this.exampleTwo="",this.exampleThree="",this.options="",this.uiBasic=st,this.uiFull=pt,this.uiError=mt,this.uiInline=ut,this.uiDisabled=ct,this.uiSuccess=bt,this.ngBasic=nt,this.ngLabel=dt,this.ngHelpers=lt,this.ngInline=ot,this.ngDisabled=at,this.angularTs=xt,this.successRadioModel="Large",this.errorRadioModel=""}ngAfterViewInit(){this.errorRadio.control.markAsTouched(),this.successRadio.control.markAsTouched()}selectNothing(){return!1}static{this.\u0275fac=function(x){return new(x||b)}}static{this.\u0275cmp=k({type:b,selectors:[["ng-component"]],viewQuery:function(x,r){if(x&1&&B(tt,5)(it,5),x&2){let d;M(d=T())&&(r.successRadio=d.first),M(d=T())&&(r.errorRadio=d.first)}},hostVars:4,hostBindings:function(x,r){x&2&&N("content-area",!0)("dox-content-panel",!0)},features:[L],decls:604,vars:41,consts:[["errorRadio","ngModel"],["successRadio","ngModel"],["tab","code"],["id","summary",1,"component-summary"],["id","forms-code-samples","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["cds-text","code"],["data-toc-item","","id","angular-basic","cds-text","section",1,"clr-mt-32px"],[1,"clr-mt-24px"],["type","radio","aria-label","basic","clrRadio",""],["name","radio button ng basic",3,"componentTemplate"],["data-toc-item","","id","labels","cds-text","section",1,"clr-mt-32px"],["type","radio","clrRadio","","name","test2","value","option1"],["type","radio","clrRadio","","name","test2","value","option2"],["name","radio button ng label",3,"componentTemplate"],["data-toc-item","","id","helper-and-error","cds-text","section",1,"clr-mt-32px"],["type","radio","clrRadio","","name","test3","required","","value","option1",3,"ngModelChange","ngModel"],["type","radio","clrRadio","","name","test3","required","","value","option2",3,"ngModelChange","ngModel"],["name","radio button ng helpers",3,"componentTemplate","componentClass","showComponentClass"],["data-toc-item","","id","inline-radios","cds-text","section",1,"clr-mt-32px"],["clrInline",""],["type","radio","clrRadio","","name","test4","required","","value","option1",3,"ngModelChange","ngModel"],["type","radio","clrRadio","","name","test4","required","","value","option2",3,"ngModelChange","ngModel"],["name","radio button ng inline",3,"componentTemplate","componentClass","showComponentClass"],["data-toc-item","","id","disabled-radios","cds-text","section",1,"clr-mt-32px"],["type","radio","clrRadio","","name","test5","value","o
169ption1","disabled","",3,"ngModelChange","ngModel"],["type","radio","clrRadio","","name","test5","value","option2","disabled","",3,"ngModelChange","ngModel"],["name","radio button ng disabled",3,"componentTemplate","componentClass","showComponentClass"],["cds-text","title","id","css-component",1,"clr-mt-48px"],["data-toc-item","","id","css-basic","cds-text","section",1,"clr-mt-32px"],[1,"clr-radio-wrapper","clr-mt-24px"],["type","radio","id","radio0","name","radio-basic","value","option1",1,"clr-radio"],["for","radio0",1,"clr-control-label"],["name","radio button ui basic",3,"componentTemplate"],["data-toc-item","","id","full-display","cds-text","section",1,"clr-mt-32px"],[1,"clr-form-control","clr-mt-24px"],[1,"clr-control-label"],[1,"clr-control-container"],[1,"clr-radio-wrapper"],["type","radio","id","radio1","name","radio-full","value","option1",1,"clr-radio"],["for","radio1",1,"clr-control-label"],["type","radio","id","radio2","name","radio-full","value","option2",1,"clr-radio"],["for","radio2",1,"clr-control-label"],["type","radio","id","radio3","name","radio-full","value","option3",1,"clr-radio"],["for","radio3",1,"clr-control-label"],[1,"clr-subtext-wrapper","error"],["shape","error-standard","status","danger",1,"clr-validate-icon"],[1,"clr-subtext"],["name","radio button ui full",3,"componentTemplate"],["data-toc-item","","id","error-state","cds-text","section",1,"clr-mt-32px"],[1,"clr-control-container","clr-error"],["type","radio","id","radio4","name","radio-error","value","option1",1,"clr-radio"],["for","radio4",1,"clr-control-label"],["type","radio","id","radio5","name","radio-error","value","option2",1,"clr-radio"],["for","radio5",1,"clr-control-label"],["type","radio","id","radio6","name","radio-error","value","option3",1,"clr-radio"],["for","radio6",1,"clr-control-label"],["name","radio button ui error",3,"componentTemplate"],["data-toc-item","","id","success-state","cds-text","section",1,"clr-mt-32px"],[1,"clr-control-container","clr-success"],["type","radio","id","radio-success1","name","radio-success","value","option1",1,"clr-radio"],["for","radio-success1",1,"clr-control-label"],["type","radio","id","radio-success2","name","radio-success","value","option2",1,"clr-radio"],["for","radio-success2",1,"clr-control-label"],["type","radio","id","radio-success3","name","radio-success","value","option3",1,"clr-radio"],["for","radio-success3",1,"clr-control-label"],[1,"clr-subtext-wrapper"],[1,"clr-subtext-wrapper","success"],["shape","success-standard","status","success",1,"clr-validate-icon"],["name","radio button ui success",3,"componentTemplate"],["data-toc-item","","id","css-inline-radios","cds-text","section",1,"clr-mt-32px"],[1,"clr-control-container","clr-control-inline"],["type","radio","id","radio7","name","radio-error-inline","value","option1",1,"clr-radio"],["for","radio7",1,"clr-control-label"],["type","radio","id","radio8","name","radio-error-inline","value","option2",1,"clr-radio"],["for","radio8",1,"clr-control-label"],["type","radio","id","radio9","name","radio-error-inline","value","option3",1,"clr-radio"],["for","radio9",1,"clr-control-label"],["name","radio button ui inline",3,"componentTemplate"],["data-toc-item","","id","css-disabled-radios","cds-text","section",1,"clr-mt-32px"],[1,"clr-form-control","clr-form-control-disabled","clr-mt-24px"],[1,"radio"],["type","radio","id","radio10","name","radio-error","value","option1","disabled","",1,"clr-radio"],["for","radio10",1,"clr-control-label"],["type","radio","id","radio11","name","radio-error","value","option2","disabled","",1,"clr-radio"],["for","radio11",1,"clr-control-label"],["type","radio","id","radio12","name","radio-error","value","option3","disabled","",1,"clr-radio"],["for","radio12",1,"clr-control-label"],["name","radio button ui disabled",3,"componentTemplate"],["tab","overview"],[1,"component-summary"],["id","usage","cds-text","title",1,"clr-mt-48px"],[1,"clrweb-DoxVersusBox","clr-mt-24px","clr-component-no-top-margin"],[1,"clrweb-DoxVersusBox-items","clrweb-DoxVersusBox-vsContent"],[1,"clrweb-DoxVersusBox-itemWrapper","clr-col-12","clr-col-sm-6",2,"align-items","normal"],[1,"clrweb-DoxVersusBox-item"],["clrForm","","clrLayout","horizontal"],["type","radio","clrRadio","","name","horizontal","value","radio1","checked",""],[1,"clr-mt-8px"],[1,"clrweb-DoxVersusBox-vsWrapper","clr-col-12"],[3,"lightSrc","darkSrc","imageAlt","imageStyle"],[1,"clrweb-DoxVersusBox-itemWrapper","clr-col-12","clr-col-sm-6"],[1,"clrweb-DoxVersusBox-item","clr-row"],["clrSelect","","name","options","required",""],["value","one","selected",""],["routerLink","/documentation/select"],["routerLink","/documentation/datalist"],["cds-text","body",1,"clr-mt-32px"],[3,"linkColWidth","links"],["id","states","cds-text","title",1,"clr-mt-48px"],[1,"clr-row","clr-mt-32px"],[1,"clr-col-6"],[1,"component-box-container"],["type","radio","clrRadio","","name","enabled","value","Small"],["type","radio","clrRadio","","name","enabled","value","Large"],["cds-text","section disable-lhe","id","enabled",1,"clr-mt-0px"],["type","radio","clrRadio","","name","disabled","value","Small","disabled","",3,"ngModelChange","ngModel"],["type","radio","clrRadio","","name","disabled","value","Large","disabled","",3,"ngModelChange","ngModel"],["cds-text","section disable-lhe","id","disabled",1,"clr-mt-0px"],["type","radio","clrRadio","","name","error","value","Small","required","",3,"ngModelChange","ngModel"],["type","radio","clrRadio","","name","error","value","Large","required","",3,"ngModelChange","ngModel"],[4,"clrIfError"],["cds-text","section disable-lhe","id","error",1,"clr-mt-0px"],["cds-text","section disable-lhe","id","success",1,"clr-mt-0px"],["id","layouts","cds-text","title",1,"clr-mt-48px"],["routerLink","/documentation/forms"],["cds-text","section","id","vertical",1,"clr-mt-32px"],[1,"clr-ml-32px"],["type","radio","clrRadio","","name","vertical","value","radio1","checked",""],["type","radio","clrRadio","","name","vertical","value","radio2"],["type","radio","clrRadio","","name","vertical","value","radio3"],["cds-text","section","id","vertical-inline",1,"clr-mt-32px"],[3,"clrInline"],["type","radio","clrRadio","","name","verticalInline","value","radio1","checked",""],["type","radio","clrRadio","","name","verticalInline","value","radio2"],["type","radio","clrRadio","","name","verticalInline","value","radio3"],["cds-text","section","id","horizontal",1,"clr-mt-32px"],[1,"clr-row"],[1,"clr-ml-32px","clr-col-6"],["type","radio","clrRadio","","name","horizontal","value","radio2"],["type","radio","clrRadio","","name","horizontal","value","radio3"],["cds-text","section","id","horizontal-inline",1,"clr-mt-32px"],["type","radio","clrRadio","","name","horizontalInline","value","radio1","checked",""],["type","radio","clrRadio","","name","horizontalInline","value","radio2"],["type","radio","clrRadio","","name","horizontalInline","value","radio3"],["cds-text","section","id","compact",1,"clr-mt-32px"],["clrForm","","clrLayout","compact"],["type","radio","clrRadio","","name","compact","value","radio1","checked",""],["type","radio","clrRadio","","name","compact","value","radio2"],["type","radio","clrRadio","","name","compact","value","radio3"],["tab","api"],["styleDocsKey","Radio"],["tab","accessibility"],["cds-text","body",1,"clr-mt-16px","clr-mb-16px"],["componentName","Radio","subComponentName","label",3,"canNestComponents","cannotNestComponents","conditionalNesting"]],template:function(x,r){if(x&1){let d=W();e(0,"app-doc-tabs")(1,"app-doc-tab",2)(2,"p",3),t(3," Using radio buttons, users can select one option from a group of options. "),i(),e(4,"h2",4),t(5,"Angular Radio Component"),i(),e(6,"p",5),t(7," If you are using Angular, the recommended approach is to always use the "),e(8,"code",6),t(9,"ClrRadio"),i(),t(10," directive on your radio buttons to help manage the form control. By using "),e(11,"code",6),t(12,"ClrRadio"),i(),t(13,", you'll automatically be able to leverage built in validation, helper text, and layout features in forms. "),i(),e(14,"h3",7),t(15,"Basic radio button"),i(),e(16,"p",5),t(17," While it is possible to create a radio button without a label, the cases are rare. However, it is possible by just adding "),e(18,"code",6),t(19,"clrRadio"),i(),t(20," to your radio button to wire up the directive. Notice, it is necessary to add "),e(21,"code",6),t(22,'type="radio"'),i(),t(23,". "),i(),e(24,"div",8),n(25,"input",9),i(),e(26,"div",8),n(27,"app-stackblitz-example",10),i(),e(28,"h3",11),t(29,"Labels"),i(),e(30,"p",5),t(31," For anything beyond a standalone radio button, you'll need to wrap your radios with the "),e(32,"code",6),t(33,"ClrRadioWrapper"),i(),t(34," component when you include a label. This manages the label and display of the radio button for you. "),i(),e(35,"div",8)(36,"clr-radio-wrapper"),n(37,"input",12),e(38,"label"),t(39,"Option 1"),i()(),e(40,"clr-radio-wrapper"),n(41,"input",13),e(42,"label"),t(43,"Option 2"),i()()(),e(44,"div",8),n(45,"app-stackblitz-example",14),i(),e(46,"h3",15),t(47,"Helper and error messages"),i(),e(48,"p",5),t(49," To leverage helper and validation messages, you'll need to wrap all of the radios inside of a "),e(50,"code",6),t(51,"ClrRadioContainer"),i(),t(52," component. The radio button container tracks the the validations placed on a radio button, such as "),e(53,"code",6),t(54,"required"),i(),t(55," or even custom built validators in Angular. Under the hood, it looks at the "),e(56,"code",6),t(57,"NgControl"),i(),t(58," values to determine the control validity, and display the helper text and error message accordingly. "),i(),e(59,"p",5),t(60," Note: the validation in this example only displays an error after you focus and leave focus without selecting a value. The easiest way to do this is to highlight the text in this paragraph, and hit tab a few times to change the focus. "),i(),e(61,"div",8)(62,"clr-radio-container")(63,"label"),t(64,"Full radio example"),i(),e(65,"clr-radio-wrapper")(66,"input",16),u("ngModelChange",function(a){return s(d),p(r.exampleOne,a)||(r.exampleOne=a),c(a)}),i(),e(67,"label"),t(68,"Option 1"),i()(),e(69,"clr-radio-wrapper")(70,"input",17),u("ngModelChange",function(a){return s(d),p(r.exampleOne,a)||(r.exampleOne=a),c(a)}),i(),e(71,"label"),t(72,"Option 2"),i()(),e(73,"clr-control-helper"),t(74,"Helper text"),i(),e(75,"clr-control-error"),t(76,"This field is required!"),i()()(),e(77,"div",8),n(78,"app-stackblitz-example",18),i(),e(79,"h3",19),t(80,"Inline radio"),i(),e(81,"p",5),t(82," Radio buttons can be placed inline by adding the "),e(83,"code",6),t(84,"clrInline"),i(),t(85," directive to your radio container elements. The radio buttons will wrap if there is not enough space. "),i(),e(86,"div",8)(87,"clr-radio-container",20)(88,"label"),t(89,"Inline radio example"),i(),e(90,"clr-radio-wrapper")(91,"input",21),u("ngModelChange",function(a){return s(d),p(r.exampleTwo,a)||(r.exampleTwo=a),c(a)}),i(),e(92,"label"),t(93,"Option 1"),i()(),e(94,"clr-radio-wrapper")(95,"input",22),u("ngModelChange",function(a){return s(d),p(r.exampleTwo,a)||(r.exampleTwo=a),c(a)}),i(),e(96,"label"),t(97,"Option 2"),i()(),e(98,"clr-control-helper"),t(99,"Helper text"),i(),e(100,"clr-control-error"),t(101,"This field is required!"),i()()(),e(102,"div",8),n(103,"app-stackblitz-example",23),i(),e(104,"h3",24),t(105,"Disabled radio"),i(),e(106,"p",5),t(107," A radio can be disabled by simply putting the "),e(108,"code",6),t(109,"disabled"),i(),t(110," attribute on the radio input. This does require the radio to be inside of a radio container. Also, for groups of radios you have to put the disabled attribute on the last radio and cannot disable individual ones, as Angular doesn't have support to disable individual radios in a group. "),i(),e(111,"div",8)(112,"clr-radio-container")(113,"label"),t(114,"Disabled radio example"),i(),e(115,"clr-radio-wrapper")(116,"input",25),u("ngModelChange",function(a){return s(d),p(r.exampleThree,a)||(r.exampleThree=a),c(a)}),i(),e(117,"label"),t(118,"Option 1"),i()(),e(119,"clr-radio-wrapper")(120,"input",26),u("ngModelChange",function(a){return s(d),p(r.exampleThree,a)||(r.exampleThree=a),c(a)}),i(),e(121,"label"),t(122,"Option 2"),i()(),e(123,"clr-control-helper"),t(124,"Helper text"),i()()(),e(125,"div",8),n(126,"app-stackblitz-example",27),i(),e(127,"h2",28),t(128,"CSS Radio Component"),i(),e(129,"p",5),t(130," Radio buttons can be used without Angular, but without some of the automatic interactivity. If you intend to create your own components, here are the basic features you'll need to build out. "),i(),e(131,"h3",29),t(132,"Basic radio button"),i(),e(133,"p",5),t(134," This is the minimal markup needed to style the radio button control by wrapping it with the an element with the "),e(135,"code",6),t(136,"clr-radio-wrapper"),i(),t(137," class. You must then put the input first, then the label like you see below (the CSS selectors are specific about this ordering). You'll want to tie the input and label together by providing an id for the label to connect. Ensure you add the "),e(138,"code",6),t(139,"clr-radio"),i(),t(140," class to the radio button as well. "),i(),e(141,"div",30),n(142,"input",31),e(143,"label",32),t(144,"My choice"),i()(),e(145,"div",8),n(146,"app-stackblitz-example",33),i(),e(147,"h3",34),t(148,"Full input display"),i(),e(149,"p",5),t(150," Each form control has a "),e(151,"code",6),t(152,".clr-form-control"),i(),t(153," wrapper, as well as a specific DOM structure necessary to layout the form control as desired. This works with all layout options as well without needing to change the DOM structure in any way. "),i(),e(154,"div",35)(155,"label",36),t(156,"Full radio example"),i(),e(157,"div",37)(158,"div",38),n(159,"input",39),e(160,"label",40),t(161,"option 1"),i()(),e(162,"div",38),n(163,"input",41),e(164,"label",42),t(165,"option 2"),i()(),e(166,"div",38),n(167,"input",43),e(168,"label",44),t(169,"option 3"),i()(),e(170,"div",45),n(171,"cds-icon",46),e(172,"span",47),t(173,"Error message"),i()()()(),e(174,"div",8),n(175,"app-stackblitz-example",48),i(),e(176,"h3",49),t(177,"Error state"),i(),e(178,"p",5),t(179," To signify an error state, you need to add the "),e(180,"code",6),t(181,".clr-error"),i(),t(182," class to the "),e(183,"code",6),t(184,".clr-control-container"),i(),t(185," element. Then place the error message inside a "),e(186,"code",6),t(187,".clr-subtext-wrapper"),i(),t(188," element with the "),e(189,"code",6),t(190,".error"),i(),t(191," class. This wrapper is hidden by default and only becomes visible when the parent container has "),e(192,"code",6),t(193,".clr-error"),i(),t(194,". Inside the wrapper, you may include a "),e(195,"code",6),t(196,".clr-validate-icon"),i(),t(197," and a "),e(198,"code",6),t(199,".clr-subtext"),i(),t(200," element for the error message \u2014 both will be styled in the error color automatically. Helper text placed in a plain "),e(201,"code",6),t(202,".clr-subtext-wrapper"),i(),t(203," (without the "),e(204,"code",6),t(205,".error"),i(),t(206," or "),e(207,"code",6),t(208,".success"),i(),t(209," class) remains visible regardless of the validation state. "),i(),e(210,"div",35)(211,"label",36),t(212,"Error radio"),i(),e(213,"div",50)(214,"div",38),n(215,"input",51),e(216,"label",52),t(217,"option 1"),i()(),e(218,"div",38),n(219,"input",53),e(220,"label",54),t(221,"option 2"),i()(),e(222,"div",38),n(223,"input",55),e(224,"label",56),t(225,"option 3"),i()(),e(226,"span",47),t(227,"Helper Text"),i(),e(228,"div",45),n(229,"cds-icon",46),e(230,"span",47),t(231,"Error message"),i()()()(),e(232,"div",8),n(233,"app-stackblitz-example",57),i(),e(234,"h3",58),t(235,"Success state"),i(),e(236,"p",5),t(237," To signify a success state, add the "),e(238,"code",6),t(239,".clr-success"),i(),t(240," class to the "),e(241,"code",6),t(242,".clr-control-container"),i(),t(243," element. Then place the success message inside a "),e(244,"code",6),t(245,".clr-subtext-wrapper"),i(),t(246," element with the "),e(247,"code",6),t(248,".success"),i(),t(249," class. This wrapper is hidden by default and only becomes visible when the parent container has "),e(250,"code",6),t(251,".clr-success"),i(),t(252,". Inside the wrapper, include a "),e(253,"code",6),t(254,".clr-validate-icon"),i(),t(255," and a "),e(256,"code",6),t(257,".clr-subtext"),i(),t(258," element for the success message \u2014 both will be sty
169led in the success color automatically. Helper text placed in a plain "),e(259,"code",6),t(260,".clr-subtext-wrapper"),i(),t(261," (without the "),e(262,"code",6),t(263,".error"),i(),t(264," or "),e(265,"code",6),t(266,".success"),i(),t(267," class) remains visible regardless of the validation state. "),i(),e(268,"div",35)(269,"label",36),t(270,"Success radio"),i(),e(271,"div",59)(272,"div",38),n(273,"input",60),e(274,"label",61),t(275,"option 1"),i()(),e(276,"div",38),n(277,"input",62),e(278,"label",63),t(279,"option 2"),i()(),e(280,"div",38),n(281,"input",64),e(282,"label",65),t(283,"option 3"),i()(),e(284,"div",66)(285,"span",47),t(286,"Helper Text"),i()(),e(287,"div",67),n(288,"cds-icon",68),e(289,"span",47),t(290,"Success message"),i()()()(),e(291,"div",8),n(292,"app-stackblitz-example",69),i(),e(293,"h3",70),t(294,"Inline radio"),i(),e(295,"p",5),t(296," Radio buttons can be placed inline by adding the "),e(297,"code",6),t(298,"clr-control-inline"),i(),t(299," directive to your radio container. The radio buttons will wrap if there is not enough space. "),i(),e(300,"p",5),t(301," The subtext content, the icon and subtext messages, also must be wrapped in a "),e(302,"code",6),t(303,"clr-subtext-wrapper"),i(),t(304," element so it can properly layout in all layout variations. If you omit this, the validation icon and text may appear in the wrong place. "),i(),e(305,"div",35)(306,"label",36),t(307,"Inline radio example"),i(),e(308,"div",71)(309,"div",38),n(310,"input",72),e(311,"label",73),t(312,"option 1"),i()(),e(313,"div",38),n(314,"input",74),e(315,"label",75),t(316,"option 2"),i()(),e(317,"div",38),n(318,"input",76),e(319,"label",77),t(320,"option 3"),i()(),e(321,"div",45),n(322,"cds-icon",46),e(323,"span",47),t(324,"Error message"),i()()()(),e(325,"div",8),n(326,"app-stackblitz-example",78),i(),e(327,"h3",79),t(328,"Disabled radios"),i(),e(329,"p",5),t(330," In order to disable buttons, you'll add the "),e(331,"code",6),t(332,"disabled"),i(),t(333," attribute on the radio and putting the "),e(334,"code",6),t(335,"clr-form-control-disabled"),i(),t(336," class onto the form control wrapper. This helps setup the correct styling for the labels and other aspects of the form control when it is disabled. "),i(),e(337,"div",80)(338,"label",36),t(339,"Disabled radio example"),i(),e(340,"div",37)(341,"div",81),n(342,"input",82),e(343,"label",83),t(344,"option 1"),i()(),e(345,"div",38),n(346,"input",84),e(347,"label",85),t(348,"option 2"),i()(),e(349,"div",38),n(350,"input",86),e(351,"label",87),t(352,"option 3"),i()(),e(353,"div",66)(354,"span",47),t(355,"Helper text"),i()()()(),e(356,"div",8),n(357,"app-stackblitz-example",88),i()(),e(358,"app-doc-tab",89)(359,"p",90),t(360," The radio button component is a form element consisting of a list of items that allow the user to select one of the options in the list. "),i(),e(361,"h2",91),t(362,"Usage"),i(),e(363,"p",5),t(364," Use radio buttons when you want users to see all available mutually exclusive options and you have a short list of options. "),i(),e(365,"div",92)(366,"div",93)(367,"div",94)(368,"div",95)(369,"form",96)(370,"clr-radio-container")(371,"clr-radio-wrapper"),n(372,"input",97),e(373,"label"),t(374,"Radio Label"),i()()()(),e(375,"span",98),t(376,"Use radio buttons for six or fewer options."),i()()(),e(377,"div",99),n(378,"app-themed-image",100),i(),e(379,"div",101)(380,"div",102)(381,"form",96)(382,"clr-select-container")(383,"label"),t(384,"Select"),i(),e(385,"select",103)(386,"option",104),t(387,"Option One"),i()()()(),e(388,"span"),t(389," Use a "),e(390,"a",105),t(391,"select box"),i(),t(392," for more than six options, or a "),e(393,"a",106),t(394,"datalist"),i(),t(395," for more than 13 options. Both prompt users to interact with the component to show the various options. "),i()()()()(),e(396,"p",107),t(397,"See more usage guidelines in our patterns:"),i(),n(398,"app-link-cards",108),e(399,"h2",109),t(400,"States"),i(),e(401,"div",110)(402,"div",111)(403,"div",112)(404,"clr-radio-container")(405,"label"),t(406,"Select size"),i(),e(407,"clr-radio-wrapper"),n(408,"input",113),e(409,"label"),t(410,"Small"),i()(),e(411,"clr-radio-wrapper"),n(412,"input",114),e(413,"label"),t(414,"Large"),i()()()()(),e(415,"div",111)(416,"h3",115),t(417,"Enabled"),i(),e(418,"p",5),t(419,"Use when interactive and ready for input."),i()()(),e(420,"div",110)(421,"div",111)(422,"div",112)(423,"clr-radio-container")(424,"label"),t(425,"Select size"),i(),e(426,"clr-radio-wrapper")(427,"input",116),u("ngModelChange",function(a){return s(d),p(r.options,a)||(r.options=a),c(a)}),i(),e(428,"label"),t(429,"Small"),i()(),e(430,"clr-radio-wrapper")(431,"input",117),u("ngModelChange",function(a){return s(d),p(r.options,a)||(r.options=a),c(a)}),i(),e(432,"label"),t(433,"Large"),i()()()()(),e(434,"div",111)(435,"h3",118),t(436,"Disabled"),i(),e(437,"p",5),t(438," Use when not interactive. For example, when a user does not have permissions to edit the input. "),i()()(),e(439,"div",110)(440,"div",111)(441,"div",112)(442,"clr-radio-container")(443,"label"),t(444,"Select size"),i(),e(445,"clr-radio-wrapper")(446,"input",119,0),u("ngModelChange",function(a){return s(d),p(r.errorRadioModel,a)||(r.errorRadioModel=a),c(a)}),i(),e(448,"label"),t(449,"Small"),i()(),e(450,"clr-radio-wrapper")(451,"input",120,0),u("ngModelChange",function(a){return s(d),p(r.errorRadioModel,a)||(r.errorRadioModel=a),c(a)}),i(),e(453,"label"),t(454,"Large"),i()(),V(455,rt,2,0,"clr-control-error",121),i()()(),e(456,"div",111)(457,"h3",122),t(458,"Error"),i(),e(459,"p",5),t(460," Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. "),i()()(),e(461,"div",110)(462,"div",111)(463,"div",112)(464,"clr-radio-container")(465,"label"),t(466,"Select size"),i(),e(467,"clr-radio-wrapper")(468,"input",119,1),u("ngModelChange",function(a){return s(d),p(r.successRadioModel,a)||(r.successRadioModel=a),c(a)}),i(),e(470,"label"),t(471,"Small"),i()(),e(472,"clr-radio-wrapper")(473,"input",120,1),u("ngModelChange",function(a){return s(d),p(r.successRadioModel,a)||(r.successRadioModel=a),c(a)}),i(),e(475,"label"),t(476,"Large"),i()(),e(477,"clr-control-success"),t(478,"Changes saved"),i()()()(),e(479,"div",111)(480,"h3",123),t(481,"Success"),i(),e(482,"p",5),t(483,"Use to provide real-time feedback immediately after a user\u2019s input."),i()()(),e(484,"h2",124),t(485,"Layouts"),i(),e(486,"p",5),t(487," Radio buttons are available in vertical, horizontal, and compact layouts. See more layout guidelines on the "),e(488,"a",125),t(489,"forms page"),i()(),e(490,"h3",126),t(491,"Vertical"),i(),e(492,"div",127)(493,"clr-radio-container")(494,"label"),t(495,"label"),i(),e(496,"clr-radio-wrapper"),n(497,"input",128),e(498,"label"),t(499,"radio 1"),i()(),e(500,"clr-radio-wrapper"),n(501,"input",129),e(502,"label"),t(503,"radio 2"),i()(),e(504,"clr-radio-wrapper"),n(505,"input",130),e(506,"label"),t(507,"radio 3"),i()(),e(508,"clr-control-helper"),t(509,"message text"),i()()(),e(510,"h3",131),t(511,"Vertical Inline"),i(),e(512,"div",127)(513,"clr-radio-container",132)(514,"label"),t(515,"label"),i(),e(516,"clr-radio-wrapper"),n(517,"input",133),e(518,"label"),t(519,"radio 1"),i()(),e(520,"clr-radio-wrapper"),n(521,"input",134),e(522,"label"),t(523,"radio 2"),i()(),e(524,"clr-radio-wrapper"),n(525,"input",135),e(52
1696,"label"),t(527,"radio 3"),i()(),e(528,"clr-control-helper"),t(529,"message text"),i()()(),e(530,"h3",136),t(531,"Horizontal"),i(),e(532,"form",96)(533,"div",137)(534,"div",138)(535,"clr-radio-container")(536,"label"),t(537,"label"),i(),e(538,"clr-radio-wrapper"),n(539,"input",97),e(540,"label"),t(541,"radio 1"),i()(),e(542,"clr-radio-wrapper"),n(543,"input",139),e(544,"label"),t(545,"radio 2"),i()(),e(546,"clr-radio-wrapper"),n(547,"input",140),e(548,"label"),t(549,"radio 3"),i()(),e(550,"clr-control-helper"),t(551,"message text"),i()()()()(),e(552,"h3",141),t(553,"Horizontal Inline"),i(),e(554,"form",96)(555,"div",137)(556,"div",138)(557,"clr-radio-container",132)(558,"label"),t(559,"label"),i(),e(560,"clr-radio-wrapper"),n(561,"input",142),e(562,"label"),t(563,"radio 1"),i()(),e(564,"clr-radio-wrapper"),n(565,"input",143),e(566,"label"),t(567,"radio 2"),i()(),e(568,"clr-radio-wrapper"),n(569,"input",144),e(570,"label"),t(571,"radio 3"),i()(),e(572,"clr-control-helper"),t(573,"message text"),i()()()()(),e(574,"h3",145),t(575,"Compact"),i(),e(576,"form",146)(577,"div",137)(578,"div",138)(579,"clr-radio-container")(580,"label"),t(581,"label"),i(),e(582,"clr-radio-wrapper"),n(583,"input",147),e(584,"label"),t(585,"radio 1"),i()(),e(586,"clr-radio-wrapper"),n(587,"input",148),e(588,"label"),t(589,"radio 2"),i()(),e(590,"clr-radio-wrapper"),n(591,"input",149),e(592,"label"),t(593,"radio 3"),i()(),e(594,"clr-control-helper"),t(595,"message text"),i()()()()()(),e(596,"app-doc-tab",150),n(597,"app-style-docs",151),i(),e(598,"app-doc-tab",152)(599,"p",153),t(600," The Radio Button component includes a native input type radio form element (with all native limitations), a label, helper text, and status messaging. "),i(),e(601,"p",153),t(602," Avoid nesting components within helper text or error messages, as this can cause overloading. Consult your design team for guidance. "),i(),n(603,"app-nesting-table",154),i()()}x&2&&(l(27),o("componentTemplate",r.ngBasic.default),l(18),o("componentTemplate",r.ngLabel.default),l(21),m("ngModel",r.exampleOne),l(4),m("ngModel",r.exampleOne),l(8),o("componentTemplate",r.ngHelpers.default)("componentClass",r.angularTs)("showComponentClass",!1),l(13),m("ngModel",r.exampleTwo),l(4),m("ngModel",r.exampleTwo),l(8),o("c
169omponentTemplate",r.ngInline.default)("componentClass",r.angularTs)("showComponentClass",!1),l(13),m("ngModel",r.exampleThree),l(4),m("ngModel",r.exampleThree),l(6),o("componentTemplate",r.ngDisabled.default)("componentClass",r.angularTs)("showComponentClass",!1),l(20),o("componentTemplate",r.uiBasic.default),l(29),o("componentTemplate",r.uiFull.default),l(58),o("componentTemplate",r.uiError.default),l(59),o("componentTemplate",r.uiSuccess.default),l(34),o("componentTemplate",r.uiInline.default),l(31),o("componentTemplate",r.uiDisabled.default),l(21),o("lightSrc","/assets/images/versus-icon-light.svg")("darkSrc","/assets/images/versus-icon-dark.svg")("imageAlt","versus")("imageStyle","margin: 0 auto;width: 72px;"),l(20),o("linkColWidth",4)("links",r.patternLinks),l(29),m("ngModel",r.options),l(4),m("ngModel",r.options),l(15),m("ngModel",r.errorRadioModel),l(5),m("ngModel",r.errorRadioModel),l(4),o("clrIfError","required"),l(13),m("ngModel",r.successRadioModel),l(5),m("ngModel",r.successRadioModel),l(40),o("clrInline",!0),l(44),o("clrInline",!0),l(46),o("canNestComponents",r.canNestComponents)("cannotNestComponents",r.cannotNestComponents)("conditionalNesting",r.conditionalNesting))},dependencies:[xe,he,ce,$,ee,ie,te,ne,re,ae,J,de,se,oe,w,le,f,Q,Y,G,F,j,H,P,K,U,A,Z,X,E,ue,pe,me,z,C,ve,R],encapsulation:2})}}return b})();var ni=(()=>{class b{static{this.\u0275fac=function(x){return new(x||b)}}static{this.\u0275mod=I({type:b})}static{this.\u0275inj=D({imports:[q,be,f,O.forChild([{path:"",component:_}]),ge,E,w,R,C,_]})}}return b})();export{ni as RadioDemoModule};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.