Radio

Refer to Stockport Design System for styling information and reference images

Related

• Reusable Lookup Options
• Lookup Options
• Conditionally revealing content

DSL properties

Property	Type	Required	Default Value	Description
QuestionId	string	✔️	❌	Unique question id
Label	string	✔️	❌	Label associated with the search term
Hint	string	❌	❌	hint which appears above the options
IAG	string	❌	❌	Inset text to appear below the Label. NOTE: Do not use both Hint and IAG, use only one
Optional	bool	❌	false
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
ConditionalElementId	string	❌	❌	Display the element with this id only when option is checked More info

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