Platform: Radio Button V1.0 Component Technical Design

Process flow

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 be used only when radio is not part of forms.

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

--

Notes

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

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.

Questions