Select - smbc-digital/form-builder GitHub Wiki
Refer to Stockport Design System for styling information and reference images
DSL properties
Related
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"
}
]
}
}