Select - smbc-digital/form-builder GitHub Wiki

Refer to Stockport Design System for styling information and reference images

DSL properties

Related

• Options
• Using Lookups

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 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	❌	true
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 a 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
LabelAsH1	bool	❌	false	Display the inputs label as a h1 and not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
Options	object	✔️	❌	Select options
SummaryLabel	string	❌	❌	Change the label associated with this input on the summary

Select examples

DS Json for single select on a page:

{
      "Title": "Select an option",
      "HideTitle": true,
      "PageSlug": "page-two",
      "Elements": [
        {
          "Type": "Select",
          "Properties": {
            "QuestionId": "select",
            "LabelAsH1": true,
            "Label": "Favourite day of the week",
            "Options": [
              {
                "Text": "Sunday",
                "Value": "sunday"
              }
          ]
      }
}

DS Json for select:

        {
          "Type": "Select",
          "Properties": {
            "QuestionId": "selectone",
            "Label": "Favourite day of the week",
            "Options": [
              {
                "Text": "Sunday",
                "Value": "sunday"
              }
            ]
          }
        }

All possible properties example:

       {
         "Type": "Select",
         "Properties": {
           "QuestionId": "selectone",
           "Label": "Favourite day of the week",
           "Warning": "This thing that you want to do, should be done with care",
           "Hint":"select hint",
           "IAG": "some IAG shown in the inset",
           "StrongLabel": true,
           "Optional": false,
           "CustomValidationMessage": "Select your favorite day",
           "TargetMapping": "customer.DaysOfWeek",
           "LabelAsH1": true,

           "Options": [
             {
               "Text": "Sunday",
               "Value": "sunday"
             }
           ]
         }
       }