Radio - smbc-digital/form-builder Wiki

Refer to Stockport Design System for styling information and reference images

Related

DSL properties

Property Type Required Default Value Description
QuestionId string ✔️ Unique question id allowed characters are [a-zA-Z] only
Label string ✔️ Label associated with the search term
Warning string Warning which appears above the input NOTE: Only use one of Warning, Hint or IAG
Hint string Hint which appears above the input NOTE: Only use one of Warning, Hint or IAG
IAG string Inset text to appear below the Label. NOTE: Only use one of Warning, Hint or IAG
Optional bool false
OptionalIf Condition A condition that can be used to determine if the element is optional by comparing it to an earlier answer
CustomValidationMessage string Set a custom validation message for when user does not select an option.
TargetMapping string Used for custom object mapping when creating submit data
StrongLabel bool true Labels associated to inputs are strong
LegendAsH1 bool false Display the input's label as a h1 and not a legend (if this is set to true, HideTitle in the Page properties should also be set to true)
Options object ✔️ Select options
AllowSingleOption bool false Allows the Radio element to have a single option (Should only be used with dynamic lookup or answer lookup, and only when approved)
ConditionalElementId string Display the element with this id only when option is checked More info
OrderOptionsAlphabetically Boolean true Default ordering as alphabetical unless set to false (false will display options as input order)
SummaryLabel string Change the label associated with this input on the summary

Radio examples

DS Json for single radio on a page

{
  "Title": "Radio",
  "HideTitle": false,
  "PageSlug": "radio",
  "Elements": [
    {
      "Type": "Radio",
      "Properties": {
        "QuestionId": "radButton",
        "Label": "Do you like things?",
        "Options": [
          {
            "Text": "Yes",
            "Value": "yes"
          },
          {
            "Text": "No",
            "Value": "no"
          }
        ]
      }
    }
  ]
}

DS Json for radios:

{
  "Type": "Radio",
  "Properties": {
    "QuestionId": "radButton",
    "Label": "Do you like things?",
    "StrongLabel": true,
    "Options": [
      {
        "Text": "Yes",
        "Value": "yes"
      },
      {
        "Text": "No",
        "Value": "no"
      }
    ]
  }
}

DS Json for radios with conditonal element:

{
  "Type": "Radio",
  "Properties": {
    "QuestionId": "radButton",
    "Label": "Do you like things?",
    "StrongLabel": true,
    "Options": [
      {
        "Text": "Yes",
        "Value": "yes",
        "ConditionalElementId": "yesOptionConditional"
      },
      {
        "Text": "No",
        "Value": "no"
      }
    ]
  }
},
{
  "Type": "TextBox",
  "Properties": {
    "QuestionId": "yesOptionConditional",
    "Label": "Tell us why",
    "IsConditionalElement": true
  }
}

All possible properties example:

{
  "Type": "Radio",
  "Properties": {
    "QuestionId": "radButton",
    "Label": "Do you like things?",
    "StrongLabel": true,
    "Hint": "Things like shoes, clothes, gardening tools, etc.",
    "Warning": "This thing that you want to do, should be done with care",
    "IAG": "some iag displayed in inset text",
    "LegendAsH1": true,
    "Optional": true,
    "TargetMapping": "customer.ThingsILike",
    "CustomValidationMessage": "Select yes or no",
    "Options": [
      {
        "Text": "Yes",
        "Value": "yes",
        "Hint": "Yes, very much!",
        "ConditionalElementId": "yesOptionConditional"
      },
      {
        "Text": "No",
        "Value": "no"
      }
    ]
  }
}