a!radioButtonField

Certified Senior Developer

hello,

Is it possible to change color of radio button labels ? 

  Discussion posts and replies are publicly visible

  • Hi,

    There is no property in radibuttonfield component to set the label color. You can use a richtextdisplay field with your desired style/color to show your label and make the labelposition of radiobutton field as "COLLAPSED". 

    Hope this helps!

    Thanks,

    Sree Devi J R

  • As noted here, this cannot be done directly within the radio button - but you can create your own custom radio buttons using a side by side layout with a combination of radio button and rich text display field such as:

    a!localVariables(
      local!options: {
        {label: "Option 1", value: 1, color: "ACCENT"},
        {label: "Option 2", value: 2, color: "POSITIVE"},
        {label: "Option 3", value: 3, color: "NEGATIVE"}
      },
      local!selection,
      {
        a!forEach(
          items: local!options,
          expression: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  width: "MINIMIZE",
                  item: a!radioButtonField(
                    labelPosition: "COLLAPSED",
                    choiceLabels: {""},
                    choiceValues: {fv!item.value},
                    value: if(
                      local!selection=tostring(fv!item.value),
                      local!selection,
                      null
                    ),
                    saveInto: local!selection
                  )
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: a!richTextItem(
                      text: fv!item.label,
                      color: fv!item.color
                    )
                  )
                )
              }
            )
          }
        ),
        a!textField(
          label: "Selection",
          value: local!selection,
          readOnly: true
        )
      }
    )

  • Whilst this does meet the requirement as expressed in the original post you should be aware that good UX design should never rely in colour alone to convey meaning as this might be missed by anyone with colour-blindness. Always have a secondary, non-colour based method of conveying information.