Checkbox

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 charatcers 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. If using Dynamic Lookup & Select Exactly, the Hint will be populated for you 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. There is automatic validation there. If using Dynamic Lookup & Select Exactly, the Custom Validation Message will be populated for you
ExclusiveCheckboxValidationMessage	string	❌	❌	Set a custom validation message for when javascript in not enabled while using an exclusive option. This is required when an option provided is exclusive
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
OrderOptionsAlphabetically	Boolean	❌	false	Default ordering as input order unless set to true
SummaryLabel	string	❌	❌	Change the label associated with this input on the summary
SelectExactly	int	❌	❌	The number of checkboxes that are required to be selected

Checkbox examples

DS Json for single checkbox on a page:

{
  "Title": "Your hobbies",
  "HideTitle": true,
  "PageSlug": "your-hobbies",
  "HideBackButton": true,
  "Elements": [
    {
      "Type": "Checkbox",
      "Properties": {
        "QuestionId": "whatHobbies",
        "Label": "What are your hobbies?",
        "LegendAsH1": true,
        "Options": [
          {
            "Text": "Start writing a book",
            "Value": "book"
          },
          {
            "Text": "Take a photography course",
            "Value": "photography"
          }
        ]
      }
    }
  ]
}

DS Json for checkboxes:

  {
    "Type": "Checkbox",
    "Properties": {
      "QuestionId": "whatHobbies",
      "Label": "What are your hobbies?",
      "StrongLabel": true,
      "Options": [
        {
          "Text": "Start writing a book",
          "Value": "book"
        },
        {
          "Text": "Take a photography course",
          "Value": "photography"
        }
      ]
    }
  }

DS Json for checkbox with conditonal element:

{
   "Type": "Checkbox",
    "Properties": {
      "QuestionId": "whatHobbies",
      "Label": "What are your hobbies?",
    "Options": [
      {
          "Text": "Start writing a book",
          "Value": "book"
        },
        {
          "Text": "Take a photography course",
          "Value": "photography",
          "ConditionalElementId": "tellUsMore"
        }
    ]
  }
},
{
  "Type": "TextBox",
  "Properties": {
    "QuestionId": "tellUsMore",
    "Label": "Tell us more",
    "IsConditionalElement": true
  }
}

SelectExactly Example

Exactly four checkboxes out of eight are required:

{
          "Type": "Checkbox",
          "Properties": {
            "Hint": "Select exactly four options",
            "Label": "What are your hobbies?",
            "CustomValidationMessage": "Select exactly four options",
            "QuestionId": "optionalHobbies",
            "LegendAsH1": true,
            "Optional": false,
            "SelectExactly": 4,
            "Options": [
              {
                "Text": "Learn a foreign language",
                "Value": "language",
                "Hint": "Ie: Chinese, Russian, Romanian"
              },
              {
                "Text": "Start writing a book",
                "Value": "book"
              },
              {
                "Text": "Take a photography course",
                "Value": "photography"
              },
              {
                "Text": "Make your own jewellery",
                "Value": "jewellery"
              },
              {
                "Text": "Bird Watching",
                "Value": "bird watching"
              },
              {
                "Text": "Cycling",
                "Value": "cycling"
              },
              {
                "Text": "Hill Walking",
                "Value": "hill walking"
              },
              {
                "Text": "Pottery Classes",
                "Value": "pottery classes"
              }
            ]
          }
        },
        {
          "Type": "Button",
          "Properties": {
            "ButtonId": "continue"
          }
        }

All possible properties example:

  {
    "Type": "Checkbox",
    "Properties": {
      "QuestionId": "whatHobbies",
      "Hint": "You can select more than one option",
      "Warning": "Please read carefully",
      "StrongLabel": true,
      "LegendAsH1": true,
      "Label": "What are your hobbies?",
      "Optional": true,
      "IAG": "some additonal IAG text to appear in an inset",
      "TargetMapping": "customer.Hobbies",
      "CustomValidationMessage": "Select your favorite day",
      "ExclusiveCheckboxValidationMessage": "Error message for exclusive checkbox option",
      "Options": [
        {
          "Text": "Start writing a book",
          "Value": "book"
        },
        {
          "Text": "Take a photography course",
          "Value": "photography",
          "Hint": "You just need a phone or camera and passion for photography",
          "Divider": "or",
          "Exclusive": true
        }
      ]
    }
  }