Style radio

The style radio is rendered as a list of radio buttons. The field items allows to specify the options in the radio list. Note that the field items is of type json and requires

  1. valid json syntax (see https://www.json.org/)
  2. a json field value and text for each select option

It is best to copy the example below and adapt the option names and values according to your requirements.

[{
  "value":"1",
  "text": "Item1"
},
{
  "value":"2",
  "text":"Item2"
},
{
  "value":"3",
  "text": "Item3"
}]

The field is_inline specifies whether the radio buttons are listed one below the other or in one line.

Unknown Style styleSignature

Radio Buttons as List (is_inline unchecked)
Radio Buttons in one Line (is_inline checked)
Radio Buttons with Images

With a little the help of the functionality provided by the json style, it is possible to render images (or any other style fro that matter) next to the radio buttons instead of simple text.

Using the following code in the items field of the style radio a list of a radio buttons with images can be generated:

[{
  "value":"1",
  "text": { "_baseStyle": {"_name": "image", "_fields": {
    "alt": "test",
    "title": "Test",
    "source": "https://via.placeholder.com/200x30"
  }}}
},
{
  "value":"2",
  "text": { "_baseStyle": {"_name": "image", "_fields": {
    "alt": "test",
    "title": "Test",
    "source": "https://via.placeholder.com/200x30"
  }}}
},
{
  "value":"3",
  "text": { "_baseStyle": {"_name": "image", "_fields": {
    "alt": "test",
    "title": "Test",
    "source": "https://via.placeholder.com/200x30"
  }}}
}]

Note that compared to the json example presented in the introduction, now the key "text" has an object with special syntax as explained in the json style.

In the following, the output of this example is rendered (with field is_inline checked).

Impressum | Disclaimer | GTC