Radio - smbc-digital/form-builder GitHub 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 ❌ false Default ordering as input order unless set to true
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"
      }
    ]
  }
}