formio-sfds
Version:
The Form.io theme for sf.gov
855 lines (742 loc) • 72.2 kB
HTML
<!doctype html>
<html lang="en">
<head>
<title>formio-sfds</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/sfgov/forms.css">
</head>
<body>
<div class="page-node-type-form-page">
<div class="form-page formio-sfds">
<div class="px-2">
<h1>formio-sfds@10.0.0</h1>
<p>
This is the <a href="https://form.io">form.io</a> theme for
<a href="https://sf.gov">sf.gov</a> by the <a href="https://sfdigitalservices.github.io">San Francisco Digital Services</a>.
Check out <a href="https://github.com/SFDigitalServices/formio-sfds">the GitHub project</a> for more info.
</p>
<div class="d-flex flex-column flex-md-row">
<div class="pr-md-4 position-relative">
<h2 class="h2 mt-2">Examples</h1>
<div style="position: sticky; top: 0;">
<ul id="example-links" class="list-style-none">
<li>
<a href="#form-address" class="d-block py-1">
Address (custom component)
</a>
</li>
<li>
<a href="#form-autocomplete" class="d-block py-1">
Autocomplete
</a>
</li>
<li>
<a href="#form-checkbox" class="d-block py-1">
Checkbox
</a>
</li>
<li>
<a href="#form-columns-2" class="d-block py-1">
Columns (2)
</a>
</li>
<li>
<a href="#form-columns-3" class="d-block py-1">
Columns (3)
</a>
</li>
<li>
<a href="#form-datagrid-with-select" class="d-block py-1">
Datagrid with select
</a>
</li>
<li>
<a href="#form-datetime-date-only" class="d-block py-1">
Date (no time)
</a>
</li>
<li>
<a href="#form-datetime-default" class="d-block py-1">
Date & time
</a>
</li>
<li>
<a href="#form-datetime-chinese-simplified" class="d-block py-1">
Date & time (Chinese simplified)
</a>
</li>
<li>
<a href="#form-datetime-chinese" class="d-block py-1">
Date & time (Chinese traditional)
</a>
</li>
<li>
<a href="#form-datetime-spanish" class="d-block py-1">
Date & time (Spanish)
</a>
</li>
<li>
<a href="#form-day-default" class="d-block py-1">
Day (default)
</a>
</li>
<li>
<a href="#form-error-messages" class="d-block py-1">
Error messages
</a>
</li>
<li>
<a href="#form-fieldset" class="d-block py-1">
Fieldset
</a>
</li>
<li>
<a href="#form-fieldset-well" class="d-block py-1">
Fieldset in a well
</a>
</li>
<li>
<a href="#form-fieldset-in-well" class="d-block py-1">
Fieldset in a well
</a>
</li>
<li>
<a href="#form-kitchen-sink" class="d-block py-1">
Kitchen sink
</a>
</li>
<li>
<a href="#form-multi-file" class="d-block py-1">
Multiple file upload
</a>
</li>
<li>
<a href="#form-radio" class="d-block py-1">
Radio
</a>
</li>
<li>
<a href="#form-review" class="d-block py-1">
Review (custom component)
</a>
</li>
<li>
<a href="#form-review-inline" class="d-block py-1">
Review (inline)
</a>
</li>
<li>
<a href="#form-select" class="d-block py-1">
Select
</a>
</li>
<li>
<a href="#form-selectboxes" class="d-block py-1">
Select boxes
</a>
</li>
<li>
<a href="#form-select-translation" class="d-block py-1">
Select with translations
</a>
</li>
<li>
<a href="#form-shared-components" class="d-block py-1">
Shared components
</a>
</li>
<li>
<a href="#form-signature" class="d-block py-1">
Signature
</a>
</li>
<li>
<a href="#form-single-file" class="d-block py-1">
Single file upload
</a>
</li>
<li>
<a href="#form-datetime-time-only" class="d-block py-1">
Time (no date)
</a>
</li>
<li>
<a href="#form-us-state" class="d-block py-1">
U.S. state select (custom component)
</a>
</li>
<li>
<a href="#form-well" class="d-block py-1">
Well
</a>
</li>
<li>
<a href="#form-zip-code" class="d-block py-1">
ZIP code
</a>
</li>
</ul>
</div>
</div>
<div class="mt-2 pt-1">
<section id="address" class="example">
<h2 class="h3">
<a href="#address" class="fg-light-slate no-underline">#</a>
Address (custom component)
<a href="/examples/address" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-address"
style="width: 100%;"
data-form="{"components":[{"type":"address","label":"This is the label","description":"This is the description","tooltip":"And this is the tooltip"}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-address">
Submission data:
</label>
<sfgov-form-data data-form-id="form-address">
<textarea
id="json-address"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="autocomplete" class="example">
<h2 class="h3">
<a href="#autocomplete" class="fg-light-slate no-underline">#</a>
Autocomplete
<a href="/examples/autocomplete" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-autocomplete"
style="width: 100%;"
data-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 <code>multiple</code> and\n<code>customOptions.maxItemCount</code> to limit the number of\nchoices, and the <code>autocomplete.maxItemText</code> translation\nkey to change the text that shows up when two are selected.\n","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":"<b>ProTip:</b> Add <a\nhref=\"?language=debug\"><code>?language=debug</code></a> to the\nquery string to see the <code>autocomplete.*</code> translation keys\nin context.\n"}]}"
data-options="{"i18n":{"debug":{"autocomplete.noResultsText":"autocomplete.noResultsText","autocomplete.itemSelectText":"autocomplete.itemSelectText","autocomplete.maxItemText":"autocomplete.maxItemText","autocomplete.noChoicesText":"autocomplete.noChoicesText","autocomplete.searchPlaceholderValue":"autocomplete.searchPlaceholderValue"}}}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-autocomplete">
Submission data:
</label>
<sfgov-form-data data-form-id="form-autocomplete">
<textarea
id="json-autocomplete"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="checkbox" class="example">
<h2 class="h3">
<a href="#checkbox" class="fg-light-slate no-underline">#</a>
Checkbox
<a href="/examples/checkbox" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-checkbox"
style="width: 100%;"
data-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"}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-checkbox">
Submission data:
</label>
<sfgov-form-data data-form-id="form-checkbox">
<textarea
id="json-checkbox"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="columns-2" class="example">
<h2 class="h3">
<a href="#columns-2" class="fg-light-slate no-underline">#</a>
Columns (2)
<a href="/examples/columns-2" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-columns-2"
style="width: 100%;"
data-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"}]}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-columns-2">
Submission data:
</label>
<sfgov-form-data data-form-id="form-columns-2">
<textarea
id="json-columns-2"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="columns-3" class="example">
<h2 class="h3">
<a href="#columns-3" class="fg-light-slate no-underline">#</a>
Columns (3)
<a href="/examples/columns-3" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-columns-3"
style="width: 100%;"
data-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}]}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-columns-3">
Submission data:
</label>
<sfgov-form-data data-form-id="form-columns-3">
<textarea
id="json-columns-3"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datagrid-with-select" class="example">
<h2 class="h3">
<a href="#datagrid-with-select" class="fg-light-slate no-underline">#</a>
Datagrid with select
<a href="/examples/datagrid-with-select" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datagrid-with-select"
style="width: 100%;"
data-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}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datagrid-with-select">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datagrid-with-select">
<textarea
id="json-datagrid-with-select"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datetime-date-only" class="example">
<h2 class="h3">
<a href="#datetime-date-only" class="fg-light-slate no-underline">#</a>
Date (no time)
<a href="/examples/datetime-date-only" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datetime-date-only"
style="width: 100%;"
data-form="{"components":[{"type":"datetime","label":"This is the label","description":"This is the description","enableTime":false}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datetime-date-only">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datetime-date-only">
<textarea
id="json-datetime-date-only"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datetime-default" class="example">
<h2 class="h3">
<a href="#datetime-default" class="fg-light-slate no-underline">#</a>
Date & time
<a href="/examples/datetime-default" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datetime-default"
style="width: 100%;"
data-form="{"components":[{"type":"datetime","label":"This is the label","description":"This is the description"}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datetime-default">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datetime-default">
<textarea
id="json-datetime-default"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datetime-chinese-simplified" class="example">
<h2 class="h3">
<a href="#datetime-chinese-simplified" class="fg-light-slate no-underline">#</a>
Date & time (Chinese simplified)
<a href="/examples/datetime-chinese-simplified" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datetime-chinese-simplified"
style="width: 100%;"
data-form="{"components":[{"type":"datetime","label":"This is the label","description":"This is the description"}]}"
data-options="{"language":"zh"}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datetime-chinese-simplified">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datetime-chinese-simplified">
<textarea
id="json-datetime-chinese-simplified"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datetime-chinese" class="example">
<h2 class="h3">
<a href="#datetime-chinese" class="fg-light-slate no-underline">#</a>
Date & time (Chinese traditional)
<a href="/examples/datetime-chinese" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datetime-chinese"
style="width: 100%;"
data-form="{"components":[{"type":"datetime","label":"This is the label","description":"This is the description"}]}"
data-options="{"language":"zh-tw"}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datetime-chinese">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datetime-chinese">
<textarea
id="json-datetime-chinese"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="datetime-spanish" class="example">
<h2 class="h3">
<a href="#datetime-spanish" class="fg-light-slate no-underline">#</a>
Date & time (Spanish)
<a href="/examples/datetime-spanish" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-datetime-spanish"
style="width: 100%;"
data-form="{"components":[{"type":"datetime","label":"This is the label","description":"This is the description"}]}"
data-options="{"language":"es"}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-datetime-spanish">
Submission data:
</label>
<sfgov-form-data data-form-id="form-datetime-spanish">
<textarea
id="json-datetime-spanish"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="day-default" class="example">
<h2 class="h3">
<a href="#day-default" class="fg-light-slate no-underline">#</a>
Day (default)
<a href="/examples/day-default" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-day-default"
style="width: 100%;"
data-form="{"components":[{"type":"day","label":"This is the label","description":"This is the description"}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-day-default">
Submission data:
</label>
<sfgov-form-data data-form-id="form-day-default">
<textarea
id="json-day-default"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="error-messages" class="example">
<h2 class="h3">
<a href="#error-messages" class="fg-light-slate no-underline">#</a>
Error messages
<a href="/examples/error-messages" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-error-messages"
style="width: 100%;"
data-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."}}]}]}"
data-options="{"example":{"submit":true}}">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-error-messages">
Submission data:
</label>
<sfgov-form-data data-form-id="form-error-messages">
<textarea
id="json-error-messages"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="fieldset" class="example">
<h2 class="h3">
<a href="#fieldset" class="fg-light-slate no-underline">#</a>
Fieldset
<a href="/examples/fieldset" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-fieldset"
style="width: 100%;"
data-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}]}}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-fieldset">
Submission data:
</label>
<sfgov-form-data data-form-id="form-fieldset">
<textarea
id="json-fieldset"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="fieldset-well" class="example">
<h2 class="h3">
<a href="#fieldset-well" class="fg-light-slate no-underline">#</a>
Fieldset in a well
<a href="/examples/fieldset-well" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-fieldset-well"
style="width: 100%;"
data-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"}]}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-fieldset-well">
Submission data:
</label>
<sfgov-form-data data-form-id="form-fieldset-well">
<textarea
id="json-fieldset-well"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="fieldset-in-well" class="example">
<h2 class="h3">
<a href="#fieldset-in-well" class="fg-light-slate no-underline">#</a>
Fieldset in a well
<a href="/examples/fieldset-in-well" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-fieldset-in-well"
style="width: 100%;"
data-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}]}}]}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-fieldset-in-well">
Submission data:
</label>
<sfgov-form-data data-form-id="form-fieldset-in-well">
<textarea
id="json-fieldset-in-well"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="kitchen-sink" class="example">
<h2 class="h3">
<a href="#kitchen-sink" class="fg-light-slate no-underline">#</a>
Kitchen sink
<a href="/examples/kitchen-sink" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-kitchen-sink"
style="width: 100%;"
data-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"}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-kitchen-sink">
Submission data:
</label>
<sfgov-form-data data-form-id="form-kitchen-sink">
<textarea
id="json-kitchen-sink"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="multi-file" class="example">
<h2 class="h3">
<a href="#multi-file" class="fg-light-slate no-underline">#</a>
Multiple file upload
<a href="/examples/multi-file" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-multi-file"
style="width: 100%;"
data-form="{"components":[{"type":"file","storage":"base64","label":"This is the label","description":"This is the description","multiple":true}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-multi-file">
Submission data:
</label>
<sfgov-form-data data-form-id="form-multi-file">
<textarea
id="json-multi-file"
class="border-grey-4"
rows="3"
style="width: 100%; resize: vertical;">
</textarea>
</sfgov-form-data>
</div>
</div>
</section>
<section id="radio" class="example">
<h2 class="h3">
<a href="#radio" class="fg-light-slate no-underline">#</a>
Radio
<a href="/examples/radio" class="no-underline">↗️</a>
</h2>
<div class="d-flex flex-items-start">
<div class="col-4">
<sfgov-form
id="form-radio"
style="width: 100%;"
data-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}]}]}"
data-options="">
</sfgov-form>
</div>
<div class="pl-2">
<label class="fg-light-slate" for="json-radio">
Submission data:
</label>
<sfgov-form-dat