Skip to content

Platform: RadioGroup Technical Design

Kevin Okamoto edited this page Jun 24, 2020 · 6 revisions

Summary

The radio button group follows the same principles like CheckboxGroup.

Platform vs. Core Implementation

  • Core does not have an implementation of radio group component, instead requires user to build group using individual Radio components.
  • A RadioGroup component allows end user to provide input choices via a data list.
  • The Platform RadioGroup component will implement the FormFieldControl interface, thus can be used with in the FormField component.

Example

We will follow the same signature like CheckboxGroup both with list bindings as well as with <fdp-option>

<fdp-radio-group [list]="myOptions">
</fdp-radio-group>

There will one small different that we need to be able to also specify the No selection value in case its required to show None value.

<fdp-radio-group [list]="myOptions" [hasNoneValue]="true" noneValueLabel="(no selection)">
</fdp-radio-group>

Bindings:

  • hasNoneValue: Tells the radio group we need to render_ None Value._
  • noneValueLabel: Provides custom label to the none option.

i18n

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

Special Usecase: Yes

noneValueLabel can have a static string assigned as default in the lib and needs to be handled as defined in the guidelines doc above.

  • noneValueLabel when given by user can be supported with string binding:
<fdp-radio-group 
   [list]="myOptions"
   [hasNoneValue]="true"
   i18n-noneValueLabel="@@noneRadio"
   noneValueLabel="(no selection)">
</fdp-radio-group>

Redesign Required: No

Radio Group allows to provide data both as an array of objects as well as through individual Radio Buttons so redesign is not needed.


Clone this wiki locally