- id: shared-components
title: Shared components
form: https://sfds.form.io/sharedcomponents
- id: single-file
title: Single file upload
form:
components:
- type: file
storage: base64
label: This is the label
description: This is the description
- id: multi-file
title: Multiple file upload
form:
components:
- type: file
storage: base64
label: This is the label
description: This is the description
multiple: true
- id: select
title: Select
form:
components:
- type: select
widget: html5
data:
values:
- label: A
value: a
- label: B
value: b
- id: select-translation
title: Select with translations
options:
language: es
i18n:
es:
choices.label: ¿Qué dirección?
choices.values.up: Arriba
choices.values.down: Abajo
form:
components:
- type: select
widget: html5
key: choices
label: Which direction?
data:
values:
- label: Up
value: up
- label: Down
value: down
- id: checkbox
title: Checkbox
form:
components:
- type: checkbox
label: This is a long label, and it should wrap nicely alongside the checkbox with the description below it.
description: And this is the description
tooltip: And this is the tooltip
- id: autocomplete
title: Autocomplete
form:
components:
- type: select
key: job
label: Your job
tags:
- autocomplete
data:
values:
- label: Healthcare worker
value: healthCareWorker
- label: Emergency services
value: emergencyServices
- label: Food and agriculture
value: foodAndAgriculture
- label: Energy
value: energy
- label: Water and wastewater
value: waterAndWastewater
- type: select
key: words
label: Pick some words
tags:
- autocomplete
multiple: true
customOptions:
maxItemCount: 3
properties:
en:autocomplete.maxItemText: "Sorry, {{count}} tags max!"
description: |
This uses multiple and
customOptions.maxItemCount to limit the number of
choices, and the autocomplete.maxItemText translation
key to change the text that shows up when two are selected.
data:
values:
- label: green
value: green
- label: empathic
value: empathic
- label: never
value: never
- label: eleven
value: eleven
- label: dry
value: dry
- label: valuable
value: valuable
- label: fortify
value: fortify
- label: whatever
value: whatever
- label: leaven
value: leaven
- type: htmlelement
tag: div
content: |
ProTip: Add ?language=debug to the
query string to see the autocomplete.* translation keys
in context.
options:
i18n:
debug:
autocomplete.noResultsText: 'autocomplete.noResultsText'
autocomplete.itemSelectText: 'autocomplete.itemSelectText'
autocomplete.maxItemText: 'autocomplete.maxItemText'
autocomplete.noChoicesText: 'autocomplete.noChoicesText'
autocomplete.searchPlaceholderValue: 'autocomplete.searchPlaceholderValue'
- id: radio
title: Radio
form:
components:
- type: radio
label: This is the label
description: And this is the description
tooltip: And this is the tooltip
values:
- label: Option 1
value: 1
- label: Option 2 (blah)
value: 2
- label: Option 3 (this is some really long text that should wrap nicely, thanks so much)
value: 3
- id: selectboxes
title: Select boxes
form:
components:
- type: selectboxes
label: This is the label
description: And this is the description
tooltip: And this is the tooltip
values:
- label: Option 1
value: 1
- label: Option 2 (blah)
value: 2
- label: Option 3 (this is some really long text that should wrap nicely, thanks so much)
value: 3
- id: us-state
title: U.S. state select (custom component)
form:
components:
- type: state
label: This is the label
description: This is the description
tooltip: And this is the tooltip
- id: zip-code
title: ZIP code
form:
components:
- type: zip
label: This is the label
description: This is the description
tooltip: And this is the tooltip
- id: columns-2
title: Columns (2)
form:
components:
- type: columns
columns:
- width: 3
components:
- type: textfield
key: a
label: Field 1
- width: 3
components:
- type: textfield
key: b
label: Field 2
- id: columns-3
title: Columns (3)
form:
components:
- type: columns
columns:
- width: 2
components:
- type: textfield
key: a
label: Field 1
- width: 2
components:
- type: textfield
key: b
label: Field 2
- width: 2
components:
- type: number
key: c
label: Field 3
defaultValue: 10
- id: address
title: Address (custom component)
form:
components:
- type: address
label: This is the label
description: This is the description
tooltip: And this is the tooltip
- id: fieldset-well
title: Fieldset in a well
form:
components:
- type: well
components:
- type: fieldset
legend: This is the fieldset legend
description: This is the fieldset description
components:
- type: textfield
key: name
label: Your name
- type: number
key: age
label: Your age
- id: review
title: Review (custom component)
options:
scroll: false
form:
display: wizard
components:
- type: panel
title: Intro page
components:
- type: htmlelement
tag: h3
content: Hello, world!
- type: panel
title: Basics page
components:
- type: textfield
key: name
label: Your name
defaultValue: Judge
validate:
required: true
- type: number
key: age
label: Age
defaultValue: 50
- type: panel
title: More data
components:
- type: address
key: address
label: Your address
defaultValue:
line1: 123 Main St
city: San Francisco
state: CA
zip: 94110
- type: panel
title: Review your submission
components:
- type: review
label: ''
- id: review-inline
title: Review (inline)
form:
components:
- type: textfield
key: name
label: Your name
defaultValue: Judge
validate:
required: true
- type: number
key: age
label: Age
defaultValue: 50
- type: panel
title: Review your submission
components:
- type: review
label: ''
- id: signature
title: Signature
form:
components:
- type: signature
description: This is the signature description
validate:
required: true
- id: day-default
title: Day (default)
form:
components:
- type: day
label: This is the label
description: This is the description
- id: datetime-date-only
title: Date (no time)
form:
components:
- type: datetime
label: This is the label
description: This is the description
enableTime: false
- id: datetime-default
title: Date & time
form:
components:
- type: datetime
label: This is the label
description: This is the description
- id: datetime-spanish
title: Date & time (Spanish)
form:
components:
- type: datetime
label: This is the label
description: This is the description
options:
language: es
- id: datetime-chinese
title: Date & time (Chinese traditional)
form:
components:
- type: datetime
label: This is the label
description: This is the description
options:
language: zh-tw
- id: datetime-chinese-simplified
title: Date & time (Chinese simplified)
form:
components:
- type: datetime
label: This is the label
description: This is the description
options:
language: zh
- id: datetime-time-only
title: Time (no date)
form:
components:
- type: datetime
label: This is the label
description: This is the description
enableDate: false
- id: well
title: Well
form:
components:
- type: well
label: This is a well
components:
- type: textfield
label: A text field
key: some-text-field
- type: number
label: A number field
key: numero
- type: textarea
label: A text area field
key: textarea
value: ''
- type: checkbox
label: A checkbox
description: The checkbox description
- type: select
label: Select field
data:
values:
- label: Option 1
value: 1
- label: Option 2
value: 2
- id: fieldset
title: Fieldset
form:
components:
- type: fieldset
legend: The fieldset legend
description: This fieldset description
components:
- type: textfield
label: A text field
key: some-text-field
- type: number
label: A number field
key: numero
- type: textarea
label: A text area field
key: textarea
value: ''
- type: checkbox
label: A checkbox
description: The checkbox description
- type: select
label: Select field
data:
values:
- label: Option 1
value: 1
- label: Option 2
value: 2
- id: fieldset-in-well
title: Fieldset in a well
form:
components:
- type: well
label: The well label
components:
- type: fieldset
legend: The fieldset legend
description: The fieldset description
components:
- type: textfield
label: A text field
key: some-text-field
- type: number
label: A number field
key: numero
- type: textarea
label: A text area field
key: textarea
value: ''
- type: checkbox
label: A checkbox
description: The checkbox description
- type: select
label: Select field
data:
values:
- label: Option 1
value: 1
- label: Option 2
value: 2
- id: kitchen-sink
title: Kitchen sink
form:
components:
- type: textfield
label: A text field
description: The description
- type: number
label: A number field
description: The description
- type: textarea
label: A text area field
description: The description
- type: checkbox
label: A checkbox
description: The description
- type: select
label: Select field
description: The description
data:
values:
- label: Option 1
value: 1
- label: Option 2
value: 2
- type: selectboxes
label: Select boxes
description: The description
values:
- label: Select box 1
value: 1
- label: Select box 2
value: 2
- label: Select box 3
value: 3
- type: radio
description: The description
values:
- label: Radio 1
value: 1
- label: Radio 2
value: 2
- label: Radio 3
value: 3
- type: button
label: This is a button
description: The description
- type: email
label: Email field
description: The description
- type: phoneNumber
label: Phone number field
description: The description
- type: address
label: Address field
description: The description
- type: datetime
label: Datetime field
description: The description
- type: currency
label: Currency field
description: The description
- type: file
label: File field
description: The description
storage: base64
- id: error-messages
title: Error messages
options:
example:
submit: true
form:
components:
- type: fieldset
legend: Textfield
components:
- type: textfield
key: textfieldMaxLength
label: Max length
defaultValue: this is too long
validate:
maxLength: 10
- type: textfield
key: textfieldMaxLengthCustom
label: Max length + custom message
defaultValue: this is too long
validate:
maxLength: 10
customMessage: Custom error message
- type: textfield
key: textfieldMaxLengthRequired
label: Max length (required)
defaultValue: this is too long
validate:
required: true
maxLength: 10
- type: textfield
key: textfieldMaxLengthRequiredCustom
label: Max length (required) custom message
defaultValue: this is too long
validate:
required: true
maxLength: 10
customMessage: Custom error message
- type: fieldset
legend: Email
components:
- type: email
key: emailInvalid
label: Email (invalid)
defaultValue: not an email
- type: email
key: emailRequiredInvalid
label: Email (invalid + required)
defaultValue: not an email
validate:
required: true
- type: email
key: emailRequiredInvalidEmpty
label: Email (invalid + required, empty)
validate:
required: true
- type: fieldset
legend: Radio
components:
- type: radio
key: radioRequired
label: Radio (required)
values:
- label: One option
value: 1
- label: Another option
value: 2
validate:
required: true
- type: radio
key: radioRequiredCustom
label: Radio (required, custom message)
values:
- label: One option
value: 1
- label: Another option
value: 2
validate:
required: true
customMessage: Please choose an option.
- type: fieldset
legend: Checkboxes (select boxes)
components:
- type: selectboxes
key: selectboxesRequired
label: Select boxes (required)
values:
- label: One option
value: 1
- label: Another option
value: 2
validate:
required: true
- type: selectboxes
key: selectboxesRequiredCustom
label: Select boxes (required, custom message)
values:
- label: One option
value: 1
- label: Another option
value: 2
validate:
required: true
customMessage: Please choose an option.
- id: datagrid-with-select
title: Datagrid with select
form:
components:
- {
"type": "datagrid",
"input": true,
"label": "Enter the relevant information for each ADU.",
"reorder": false,
"addAnotherPosition": "bottom",
"defaultOpen": false,
"layoutFixed": false,
"enableRowGroups": false,
"initEmpty": false,
"tableView": false,
"defaultValue": [
{
"proposedUnitType": ""
}
],
"key": "proposedAdUs",
"components": [
{
"label": "Select the unit type",
"widget": "choicesjs",
"tableView": true,
"data": {
"values": [
{
"label": "Studio",
"value": "Studio"
},
{
"label": "1 Bedroom",
"value": "1Bedroom"
},
{
"label": "2 Bedroom",
"value": "2Bedroom"
},
{
"label": "3 Bedroom or more",
"value": "3Bedroom"
}
]
},
"validate": {
"required": true
},
"key": "proposedUnitType",
"type": "select",
"input": true,
"searchThreshold": 0.3
},
{
"label": "Square footage",
"mask": false,
"spellcheck": true,
"tableView": false,
"delimiter": false,
"requireDecimal": false,
"inputFormat": "plain",
"validate": {
"required": true
},
"key": "proposedSquareFootage",
"type": "number",
"decimalLimit": 0,
"input": true
}
]
}