Textbox - smbc-digital/form-builder GitHub Wiki

Refer to Stockport Design System for styling information and reference images

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 question. NOTE: If you are using a prefix and/or suffix, make sure the label is clear about the type of value expected
StrongLabel bool ❌ true Display label strongly
LabelAsH1 bool ❌ false Display Label as h1 not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
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 doesn't enter a date
MaxLength int ❌ 200 The maximum length of the input value
MinLength int ❌ ❌ The minimum length of the input value - cannot be used on optional, numeric or decimal textboxes
Regex string ❌ ❌ The regex pattern for validating input
RegexValidationMessage string ❌ Check the {label} and try again The validation message that appears if the input doesn't match the Regex pattern
TargetMapping string ❌ ❌ Used for custom object mapping when creating submit data (more info about target mapping)
Numeric bool ❌ false Used to validate input as numeric (whole number) NOTE: Both Numeric and Decimal propety cannot be true at the same time
NotAnIntegerValidationMessage string ❌ ❌ Custom validation message for if the entered value is not a whole number
Decimal bool ❌ false Used to validate input as decimal NOTE: Both Decimal and Numeric propety cannot be true at the same time
DecimalPlaces int ❌ 2 Use with Decimal to determin how many decimal places are allowed, Defaults to 2
DecimalPlacesValidationMessage string ❌ ❌ Custom validation message for if the entered value has more then the allowed decimal places
DecimalValidationMessage string ❌ ❌ Custom validation message for if the entered value is not a valid decimal
Max string ❌ ❌ Maximum integer value of input e.g. '25'
Min string ❌ ❌ Minimum integer value of input e.g. '0'
Email bool ❌ false Used to validate input as an email address (you don't need a separate Regex for email if this is true)
Postcode bool ❌ false Used to validate input as a postcode (you don't need a separate Regex for postcode if this is true)
StockportPostcode bool ❌ false Used to validate input as a Stockport postcode (you don't need a separate Regex for Stockport postcode if this is true)
Purpose string ❓ ❌ Required for autocomplete fields (refer to w3 for guidance on which field types require this )
Spellcheck bool ❌ true Can be used to enable browser spellchecking (refer to Govuk Design System for when to use this)
SummaryLabel string ❌ ❌ Change the label associated with this input on the summary
Prefix string ❌ ❌ Supply a prefix to appear before the input
Suffix string ❌ ❌ Supply a suffix to appear after the input
PrefixAriaLabel string ❌ ❌ Supply a value for a prefix to be read by a screen reader
SuffixAriaLabel string ❌ ❌ Supply a value for suffix to be read by a screen reader

Textbox examples

DS Json for National Insurance textbox:

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "niNumber",
      "Label": "NI Number",
      "Hint": "e.g: AB123456Z",
      "MaxLength": 9,
      "Regex": "^[A-Za-z]{2}[0-9]{6}[A-Za-z]{1}$",
      "RegexValidationMessage": "Enter a valid NI Number",
      "TargetMapping": "customer.ninumber"
    }
  }

DS Json for numeric textbox :

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "howManyChildren",
      "Label": "How Many Children",
      "Hint": "3",
      "CustomValidationMessage": "The children should be between 0 and 20",
      "Optional": true,
      "Max": 20,
      "Min": 0,
      "Numeric": true
    }
  }

DS Json for decimal textbox :

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "howManyChildren",
      "Label": "How Many Children",
      "Decimal": true
    }
  }

DS Json for email textbox :

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "emailAddress",
      "Label": "Email address",
      "Hint": "ie: [email protected]",
      "CustomValidationMessage": "Check the email address and try again",
      "Email": true,
      "Purpose": "email"
    }
  }

DS Json for postcode textbox :

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "postcode",
      "Label": "Postcode",
      "Postcode": true,
      "Purpose": "postal-code"
    }
  }

Textbox Stockport postcode example:

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "stopckportPostcode",
      "Label": "Postcode",
      "StockportPostcode": true,
      "Purpose": "postal-code"
    }
  }

Textbox with prefix:

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "stopckportPostcode",
      "Label": " What is the cost in pounds?",
      "prefix": "£"
    }
  }

image

Textbox with suffix:

  {
    "Type": "Textbox",
    "Properties": {
      "QuestionId": "textBoxWithSuffix",
      "Label": "Textbox with suffix",
      "suffix": " cm<sup>2</sup>"
    }
  }

image

Back to top

⚠️ **GitHub.com Fallback** ⚠️