[UI5] Things that Demo Kit didn’t tell you. <RadioButton>

For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.

Group of RadioButtons

When talking about radio button, we always mention the word “group”. Normally a group of radio buttons should be considered as one control, because they are usually used for just one field. We could specify the attribute “groupName” for different radio buttons to classify them into one group. And all the radio buttons without this attribute belong to the default group: sapMRbDefaultGroup.

Guidelines of RadioButton

Radio button is used to show a set of mutually exclusive options. Some other controls could be used for the same purpose, such as: sap.m.Switch, sap.m.CheckBox, Dropdown, sap.m.Slider, sap.m.SegmentedButton. When shall we prefer radio button?

1. There are at least two options.
2. User could only have one option. In other cases use a checkbox.
3. If the default option is recommanded for most of the users, use a dropdown.
4. If you want to represent more than 8 options, use a dropdown.
5. If there are two options and they are mutually exclusive, use a checkbox or a switch.
6. If the options are numbers with fixed steps, use a slider.
7. If a operation (like navigation) will be triggered, when user is selecting a radio button, then use an action sheet.
8. When choosing from radio button and segmented button, please consider the layout and device. For example, segmented button is always using horizontal layout and is prefered for mobile device (touch device with a smaller screen).

A label (enabled with the attribute “text”) is mandatory for a radio button.

Please take care of the sorting of the options. They should be in a logical order, like “S, M, L, XL”.

If in your case you don’t want to offer a preselected option, just leave the “selected” attribute of all radio buttons as default or false.