Platform: Radio Button V1.0 Component Technical Design

Radio Button

Summary

Radio buttons allow the user to see all options and select one. 
This is used when there are more than 1 option. 

Example

<fdp-radio-button 
                 [Id]="radiobuttonID"
                 [value]="radioButtonValue"
                 [disabled]="true|false"
                 [selected]="true|false"
                 [required]="true|false"
                 [groupId]="idOfButtongroup"
                 (onChange)="onChange($event)"
                  >
</fdp-radio-button>

##RadioButton component

Property Bindings

[id]="radiobuttonID:String

Id of the radio button.

[value]="radioButtonValue":any

  Value for the radio-button

[disabled]="true|false"":boolean

Defines if the radio button is disabled or not.

The default value is false

[selected]="true|false":boolean

for making a radio button default selected.only 1 will be selected by default.

The default value is true

[required]="true|false":boolean

 Whether the radio button is required.
 it will help when it is not part of the form.

The default value is false

[groupId]="idOfButtongroup"":string

Unique identification for grouping all radion buttons belongs to.

---

Event Bindings

(onChange)="onChange()"

   When checked state of radio button changes event is emitted.

---

Content Projection

N/A

---

Related Modules

Additional Notes

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-radio-button can be supported as:

<fdp-radio-button i18n="@@feb" [value]="'February'">
     February
</fdp-radio-button>

Redesign Required: No

---

--

Notes

1). The radio button will be part of the form controller. so label, positions, validations should be handled in form controller.

2). When the Radio button is not part of form then we will be using independent components along with it. for example for the label, we can use the label component. and validations can be handled during CTA on a respective page based on business requirements.

3). In few cases, preselection might result in incorrect inputs. Ex: Gender selection in a form. In this case, we should offer no preselection and decide whether user input is mandatory or not depending on the use case.

Questions