Radio

Refer to Stockport Design System for styling information and reference images

Related

• Options
• Using Lookups
• Conditionally revealing content

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"
      }
    ]
  }
}