Search code examples
sapui5

How to Add Descriptive Texts for Radio Buttons?

I have a requirement: I need to add descriptive texts for Radio Buttons as shown below.

mock up

Solution

  • It's currently not possible to add such a description under the text of sap.m.RadioButton. However (same as this answer), you can achieve similar behavior, look, and feel in the following combination:

    • Use sap.m.List with

      mode="SingleSelectLeft"
backgroundDesign="Transparent"
showSeparators="None"

    • In its items aggregation, use a subclass of ListItemBase that supports description / info. Use CustomListItem if nothing suites.

    sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/m/List",
  "sap/m/StandardListItem", // or ObjectListItem, CustomListItem, etc..
], (List, StandardListItem) => new List({
  mode: "SingleSelectLeft", // displays radio buttons.
  showSeparators: "None", // between items
  backgroundDesign: "Transparent",
  includeItemInSelection: true,
  width: "19rem",
}).addItem(new StandardListItem({
  title: "Others",
  description: "3rd Party Vendor Lis",
})).placeAt("content")));
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-xx-waitForTheme="true"
></script><body class="sapUiBody sapUiSizeCompact" id="content"></body>