feat(core): added readonly to radio buttons (#12961)

Co-authored-by: Mike O'Donnell <[email protected]>
SAP · Jan 30, 2025 · 9178b74 · 9178b74
1 parent ee126e2
commit 9178b74
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 1 deletion.
diff --git a/libs/core/radio/radio-button/radio-button.component.html b/libs/core/radio/radio-button/radio-button.component.html
@@ -3,6 +3,7 @@
     class="fd-radio"
     [class.is-compact]="_contentDensityObserver.isCompactSignal()"
     [disabled]="disabled"
+    [readOnly]="readOnly"
     [id]="id"
     [attr.name]="name"
     [name]="name"
@@ -13,6 +14,7 @@
     [attr.aria-disabled]="disabled"
     [attr.aria-checked]="checked"
     [attr.aria-required]="required"
+    [attr.aria-readonly]="readOnly"
     [ngModel]="currentValue"
     (ngModelChange)="valueChange($event)"
     [ngModelOptions]="{ standalone: standalone }"
@@ -26,7 +28,7 @@
     [class.fd-radio__label--wrap-top-aligned]="wrapLabel && valignLabel === 'top'"
     [attr.title]="title"
     [for]="id"
-    (click)="labelClicked($event)"
+    (click)="readOnly ? null : labelClicked($event)"
 >
     <span class="fd-radio__text">
         <ng-content></ng-content>

diff --git a/libs/core/radio/radio-button/radio-button.component.ts b/libs/core/radio/radio-button/radio-button.component.ts
@@ -97,6 +97,10 @@ export class RadioButtonComponent<T = any>
     @Input()
     disabled = false;
 
+    /** The field is used to tell if radio button should be read only */
+    @Input()
+    readOnly = false;
+
     /** The field should be only used with reactive forms
      * Its purpose is to pass a current selected value from froumGroup
      * The field is mandatory when working with reactive forms
@@ -214,6 +218,12 @@ export class RadioButtonComponent<T = any>
         this.changeDetectionRef.detectChanges();
     }
 
+    /** @hidden */
+    setReadonlyState(isReadonly: boolean): void {
+        this.readOnly = isReadonly;
+        this.changeDetectionRef.detectChanges();
+    }
+
     /** @hidden */
     writeValue(value: T): void {
         this.valueChange(value, false);

diff --git a/libs/docs/core/radio/examples/radio-example.component.html b/libs/docs/core/radio/examples/radio-example.component.html
@@ -254,5 +254,95 @@ <h4 fd-form-header>Radio Buttons Examples</h4>
                 Information Option
             </fd-radio-button>
         </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-27'"
+                value="val5"
+                state="information"
+                [disabled]="true"
+                [(ngModel)]="optionSixVariable"
+            >
+                Read Only Option
+            </fd-radio-button>
+        </div>
+    </fd-form-group>
+</fieldset>
+
+<fieldset fd-fieldset>
+    <legend fd-form-legend>Radio button States in read only mode</legend>
+    <fd-form-group>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-22'"
+                value="val0"
+                state="default"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Default Option
+            </fd-radio-button>
+        </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-23'"
+                state="success"
+                value="val1"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Valid(Success) Option
+            </fd-radio-button>
+        </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-24'"
+                value="val2"
+                state="warning"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Warning Option
+            </fd-radio-button>
+        </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-25'"
+                value="val3"
+                state="error"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Invalid(Error) Option
+            </fd-radio-button>
+        </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-26'"
+                value="val4"
+                state="information"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Information Option
+            </fd-radio-button>
+        </div>
+        <div fd-form-item>
+            <fd-radio-button
+                name="radio-name-6"
+                [id]="'radio-27'"
+                value="val5"
+                state="information"
+                [readOnly]="true"
+                [(ngModel)]="optionSevenVariable"
+            >
+                Read Only Option
+            </fd-radio-button>
+        </div>
     </fd-form-group>
 </fieldset>
diff --git a/libs/docs/core/radio/examples/radio-example.component.ts b/libs/docs/core/radio/examples/radio-example.component.ts
@@ -30,4 +30,5 @@ export class RadioExampleComponent {
     optionFourVariable = 'val1';
     optionFiveVariable = 'val1';
     optionSixVariable = 'val1';
+    optionSevenVariable = 'val1';
 }