Textbox

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
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
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

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: someone@example.com",
      "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": "£"
    }
  }

Textbox with suffix:

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