No notes defined.
{% extends '@uol-widget' %}
{% block widget_content %}
{% render '@uol-form-pattern', { form: form } %}
{% endblock %}
<div class="uol-widget-container">
<div class="uol-widget">
<div class="uol-widget__content">
<div class="uol-form__container uol-form-container--centered ">
<div class="uol-form__inner-wrapper">
<h2 class="uol-form__title">Form components with errors</h2>
<div class="uol-form__lead">
<p>This is an optional lead sentence. Quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
</div>
<div class="uol-rich-text">
<div class="uol-form__additional-content uol-form__additional-content--before">
<p>Lead links <a href="/">may be used to offer a user alternative pages</a></p>
<p>Lead links <a href="/">may be used to offer a user alternative options</a></p>
</div>
</div>
<form class="uol-form" action="/example-form-action">
<div class="uol-form__input-group uol-form__input-group--block">
</div>
<div class="uol-form--button-block">
<div class="uol-form__inputs-wrapper">
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="selectID1" id="selectID1-label">
<span class="uol-form__input-label__text">Select input (required)</span>
<span class="uol-form__input-label__hint" id="selectID1-hint">Select hint </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper " data-field-invalid=true>
<select class="uol-form__input uol-form__input--select " name="select1" id="selectID1" aria-label="Select Select input" required aria-invalid="true">
<option value="">Select an option</option>
<option value="optionValue1">Option 1</option>
<option value="optionValue2">Option 2</option>
<option value="optionValue3">Option 3</option>
<option value="optionValue4">Option 4</option>
</select>
<svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
<path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--large">
<label class="uol-form__input-label" for="tInputMdLg">
<span class="uol-form__input-label__text">Text input large (required)</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="tInputMdLg" name="tInputLg" aria-invalid="true" value="" autocomplete="off" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--medium">
<label class="uol-form__input-label" for="tInputMdId">
<span class="uol-form__input-label__text">Text input medium (required)</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="tInputMdId" name="tInputMd" aria-invalid="true" value="" autocomplete="off" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="tInputSmId">
<span class="uol-form__input-label__text">Text input small (required)</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="tInputSmId" name="tInputSm" aria-invalid="true" value="" autocomplete="off" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--x-small">
<label class="uol-form__input-label" for="tInputXsId">
<span class="uol-form__input-label__text">Text input x-small (required)</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="tInputXsId" name="tInputXs" aria-invalid="true" value="" autocomplete="off" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="telId">
<span class="uol-form__input-label__text">Telephone input (required)</span>
<span class="uol-form__input-label__hint">Telephone input hint </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--tel
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--tel" type="tel" id="telId" name="telName" aria-invalid="true" value="" pattern="[0-9]*" autocomplete="tel" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--medium">
<label class="uol-form__input-label" for="urlId">
<span class="uol-form__input-label__text">URL input (required)</span>
<span class="uol-form__input-label__hint">For example, https://www.example.com </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--url
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--url" type="url" id="urlId" name="urlName" aria-invalid="true" value="" inputmode="url" autocomplete="url" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--medium">
<label class="uol-form__input-label" for="emailId">
<span class="uol-form__input-label__text">Email address (required)</span>
<span class="uol-form__input-label__hint">Email hint </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--email
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--email" type="email" id="emailId" name="emailName" aria-invalid="true" value="" inputmode="email" autocomplete="email" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--medium">
<label class="uol-form__input-label" for="timeId">
<span class="uol-form__input-label__text">Select a time (required)</span>
<span class="uol-form__input-label__hint">Time hint </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--time
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--time" type="time" id="timeId" name="timeName" aria-invalid="true" value="" autocomplete="off" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--x-small uol-form__input-container--multiple">
<div class="uol-form__input__group-wrapper">
<div role="group" aria-labelledby="dobLabelID dobLabelID-hint dobLabelID-error" class="uol-form__custom-fieldset">
<h3 id="dobLabelID" class="uol-form__custom__legend">Inputs inline (required)</h3>
<span class="uol-form__input-label__hint" id="dobLabelID-hint">For example, 28 04 2022 </span>
<span class="uol-form__input__error" id="dobLabelID-error"><span class="hide-accessible">Error: </span>Specific error message</span>
<div class="uol-form__input--inline-wrapper">
<div class="uol-form__input--inline-field-wrapper" data-field-invalid=false>
<label class="uol-form__input-label" for="dobDay">Day</label>
<input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="dayName" id="dobDay" type="text" pattern="[0-9]{2}" autocomplete="bday-day" maxlength="2" required value="">
</div>
<div class="uol-form__input--inline-field-wrapper" data-field-invalid=true>
<label class="uol-form__input-label" for="dobMonth">Month</label>
<input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="monthName" id="dobMonth" type="text" aria-invalid="true" pattern="[0-9]{2}" autocomplete="bday-month" maxlength="2" required value="">
</div>
<div class="uol-form__input--inline-field-wrapper" data-field-invalid=false>
<label class="uol-form__input-label" for="dobYear">Year</label>
<input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="yearName" id="dobYear" type="text" pattern="[0-9]{4}" autocomplete="bday-year" maxlength="4" required value="">
</div>
</div>
</div>
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--medium">
<label class="uol-form__input-label" for="pWordId">
<span class="uol-form__input-label__text">Password input (required)</span>
<span class="uol-form__input__requirements" aria-hidden="true">
<span>Must be at least 8 characters </span>
<span>Must contain at least 1 uppercase letter </span>
</span>
<span class="hide-accessible">
Must be at least 8 characters, Must contain at least 1 uppercase letter,
</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--password
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--password" type="password" id="pWordId" name="pWord" aria-invalid="true" value="" pattern="^(?=.*?[A-Z]).{8,}$" autocomplete="new-password" required>
<button type="button" class="uol-form__input--password-toggle" aria-controls="pWordId" data-password-visible="false" hidden></button>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
">
<div role="group" aria-labelledby="cBoxes1 cBoxes1-hint cBoxes1-error" class="uol-form__custom-fieldset" data-checkboxes-required="2">
<span id="cBoxes1" class="uol-form__custom__legend">Checkboxes</span>
<span class="uol-form__input-label__hint" id="cBoxes1-hint">Select all that apply </span>
<span class="uol-form__input__error" id="cBoxes1-error"><span class="hide-accessible">Error: </span>Specific error message</span>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxOne" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxOne" id="cboxOne-label">Option 1</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxTwo" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxTwo" id="cboxTwo-label">Option 2</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxThree" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxThree" id="cboxThree-label">Option 3 displaying example with a really really really long title</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxFour" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxFour" id="cboxFour-label">Option 4</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxFive" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxFive" id="cboxFive-label">Option 5</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxSix" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxSix" id="cboxSix-label">Option 6</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="uol-form__input-container
">
<div role="radiogroup" aria-labelledby="rGroupId1 rGroupId1-hint rGroupId1-error" class="uol-form__custom-fieldset" aria-required="true">
<span id="rGroupId1" class="uol-form__custom__legend">Radios (required)</span>
<span class="uol-form__input-label__hint" id="rGroupId1-hint">Select one option. </span>
<span class="uol-form__input__error" id="rGroupId1-error"><span class="hide-accessible">Error: </span>Specific error message</span>
<div class="uol-form__inputs-wrapper ">
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rOne" name="rName" value="rOption1" checked>
<label class="uol-form__input--radio__label" for="rOne">Option 1</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rTwo" name="rName" value="rOption2">
<label class="uol-form__input--radio__label" for="rTwo">Option 2</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rThree" name="rName" value="rOption3">
<label class="uol-form__input--radio__label" for="rThree">Option 3 displaying example with a really really really long title</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rFour" name="rName" value="rOption4">
<label class="uol-form__input--radio__label" for="rFour">Option 4</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rFive" name="rName" value="rOption5">
<label class="uol-form__input--radio__label" for="rFive">Option 5</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
<div class="uol-form__input--radio-wrapper">
<input class="uol-form__input--radio" type="radio" id="rSix" name="rName" value="rOption6">
<label class="uol-form__input--radio__label" for="rSix">Option 6</label>
<span class="uol-form__input--custom-radio" hidden>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaLg" id="tAreaLg-label">
<span class="uol-form__input-label__text">Event description (required)</span>
<span class="uol-form__input-label__hint">Write a short summary about your event </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
<textarea class="uol-form__input uol-form__input--textarea" id="tAreaLg" name="tarea3" data-character-input="true" required aria-invalid="true" data-textarea-height="large" data-maxlength="300"></textarea>
</div>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaMd" id="tAreaMd-label">
<span class="uol-form__input-label__text">Event description - medium (required)</span>
<span class="uol-form__input-label__hint">Write a short summary about your event </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
<textarea class="uol-form__input uol-form__input--textarea" id="tAreaMd" name="tArea2" data-character-input="true" required aria-invalid="true" data-textarea-height="medium" data-maxlength="200" data-char-limit="true" aria-labelledby="tAreaMd-label tAreaMd-char-count"></textarea>
</div>
<p class="uol-form__input--character-count" id="tAreaMd-char-count">200 character limit</p>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaSm" id="tAreaSm-label">
<span class="uol-form__input-label__text">Event description - small (required)</span>
<span class="uol-form__input-label__hint">Write a short summary about your event </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
<textarea class="uol-form__input uol-form__input--textarea" id="tAreaSm" name="tArea1" data-character-input="true" required aria-invalid="true" data-textarea-height="small" data-maxlength="100" data-char-limit="true" aria-labelledby="tAreaSm-label tAreaSm-char-count"></textarea>
</div>
<p class="uol-form__input--character-count" id="tAreaSm-char-count">100 character limit</p>
</div>
<div class="uol-form__input-container
">
<fieldset class="uol-form__input--fieldset">
<legend class="uol-form__input--legend">
<h3 class="uol-form__input--legend-title">Fieldset</h3>
<span class="uol-form__input--legend-subtitle">Fieldset legend</span>
</legend>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="textgroupedId1">
<span class="uol-form__input-label__text">Text input grouped</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="textgroupedId1" name="textgrouped1" aria-invalid="true" value="" autocomplete="off">
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="textgroupedId2">
<span class="uol-form__input-label__text">Text input grouped</span>
<span class="uol-form__input-label__hint">Some hint </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="textgroupedId2" name="textgrouped2" aria-invalid="true" value="" autocomplete="off">
<!-- -->
</div>
</div>
</fieldset>
</div>
<div class="uol-form__input-container
">
<span class="uol-rich-text uol-form__input--checkbox-link">
<a href="/">Terms and conditions</a>
</span>
<span class="uol-form__input__error" id="cboxConfirm-error"><span class="hide-accessible">Error: </span>Specific error message</span>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxConfirm" name="cboxConfirmName" value="" required aria-labelledby="cboxConfirm-error cboxConfirm-label" aria-invalid="true">
<label class="uol-form__input--checkbox-label" for="cboxConfirm" id="cboxConfirm-label">I agree to the terms and conditions</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="uol-form__button-wrapper">
<button class="uol-button uol-button--primary
" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{
"form": {
"heading_level": "h2",
"form_centered": true,
"action": "/example-form-action",
"title": "Form components with errors",
"lead": "This is an optional lead sentence. Quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.",
"additional_info_before": "<p>Lead links <a href=\"/\">may be used to offer a user alternative pages</a></p><p>Lead links <a href=\"/\">may be used to offer a user alternative options</a></p>",
"button": {
"content": "Submit",
"type": "submit",
"style": "primary"
},
"fields": [
{
"type": "select",
"label": "Select input",
"hint": "Select hint",
"name": "select1",
"id": "selectID1",
"required": true,
"error": "Specific error message",
"invalid": true,
"input_width": "small",
"options": [
{
"id": "option1",
"value": "optionValue1",
"label": "Option 1"
},
{
"id": "option2",
"value": "optionValue2",
"label": "Option 2"
},
{
"id": "option3",
"value": "optionValue3",
"label": "Option 3"
},
{
"id": "option4",
"value": "optionValue4",
"label": "Option 4"
}
]
},
{
"type": "text",
"label": "Text input large",
"name": "tInputLg",
"id": "tInputMdLg",
"required": true,
"error": "Specific error message",
"invalid": true,
"input_width": "large"
},
{
"type": "text",
"label": "Text input medium",
"name": "tInputMd",
"id": "tInputMdId",
"required": true,
"error": "Specific error message",
"invalid": true,
"input_width": "medium"
},
{
"type": "text",
"label": "Text input small",
"name": "tInputSm",
"id": "tInputSmId",
"required": true,
"error": "Specific error message",
"invalid": true,
"input_width": "small"
},
{
"type": "text",
"label": "Text input x-small",
"name": "tInputXs",
"id": "tInputXsId",
"required": true,
"error": "Specific error message",
"invalid": true,
"input_width": "x-small"
},
{
"type": "tel",
"id": "telId",
"name": "telName",
"label": "Telephone input",
"hint": "Telephone input hint",
"error": "Specific error message",
"invalid": true,
"required": true,
"pattern": "[0-9]*",
"input_width": "small",
"autocomplete": "tel"
},
{
"type": "url",
"id": "urlId",
"name": "urlName",
"inputmode": "url",
"label": "URL input",
"hint": "For example, https://www.example.com",
"error": "Specific error message",
"invalid": true,
"required": true,
"input_width": "medium",
"autocomplete": "url"
},
{
"type": "email",
"id": "emailId",
"name": "emailName",
"label": "Email address",
"inputmode": "email",
"hint": "Email hint",
"error": "Specific error message",
"invalid": true,
"required": true,
"input_width": "medium",
"autocomplete": "email"
},
{
"type": "time",
"id": "timeId",
"name": "timeName",
"label": "Select a time",
"hint": "Time hint",
"error": "Specific error message",
"invalid": true,
"required": true,
"input_width": "medium"
},
{
"type": "inputs-inline",
"required": true,
"error": "Specific error message",
"invalid": true,
"legend": "Inputs inline",
"heading_level": "h3",
"group_label_id": "dobLabelID",
"hint": "For example, 28 04 2022",
"input_width": "x-small",
"options": [
{
"id": "dobDay",
"name": "dayName",
"inputmode": "numeric",
"label": "Day",
"min": "0",
"max": "31",
"maxlength": 2,
"pattern": "[0-9]{2}",
"autocomplete": "bday-day",
"required": true
},
{
"id": "dobMonth",
"name": "monthName",
"inputmode": "numeric",
"label": "Month",
"min": "0",
"max": "12",
"maxlength": 2,
"pattern": "[0-9]{2}",
"invalid": true,
"autocomplete": "bday-month",
"required": true
},
{
"id": "dobYear",
"name": "yearName",
"inputmode": "numeric",
"label": "Year",
"min": "1900",
"max": "2021",
"maxlength": 4,
"pattern": "[0-9]{4}",
"autocomplete": "bday-year",
"required": true
}
]
},
{
"type": "password",
"id": "pWordId",
"name": "pWord",
"label": "Password input",
"pattern": "^(?=.*?[A-Z]).{8,}$",
"requirements": [
{
"item": "Must be at least 8 characters"
},
{
"item": "Must contain at least 1 uppercase letter"
}
],
"error": "Specific error message",
"invalid": true,
"required": true,
"input_width": "medium",
"autocomplete": "new-password"
},
{
"type": "checkbox",
"error": "Specific error message",
"invalid": true,
"heading_level": "h3",
"legend": "Checkboxes",
"num_required": 2,
"hint": "Select all that apply",
"group_label_id": "cBoxes1",
"options": [
{
"id": "cboxOne",
"name": "cboxName",
"value": "cboxVal1",
"label": "Option 1"
},
{
"id": "cboxTwo",
"name": "cboxName",
"value": "cboxVal2",
"label": "Option 2"
},
{
"id": "cboxThree",
"name": "cboxName",
"value": "cboxVal3",
"label": "Option 3 displaying example with a really really really long title"
},
{
"id": "cboxFour",
"name": "cboxName",
"value": "cboxVal4",
"label": "Option 4"
},
{
"id": "cboxFive",
"name": "cboxName",
"value": "cboxVal5",
"label": "Option 5"
},
{
"id": "cboxSix",
"name": "cboxName",
"value": "cboxVal6",
"label": "Option 6"
}
]
},
{
"type": "radio",
"heading_level": "h3",
"legend": "Radios",
"hint": "Select one option.",
"required": true,
"error": "Specific error message",
"invalid": true,
"group_label_id": "rGroupId1",
"options": [
{
"id": "rOne",
"name": "rName",
"value": "rOption1",
"label": "Option 1"
},
{
"id": "rTwo",
"name": "rName",
"value": "rOption2",
"label": "Option 2"
},
{
"id": "rThree",
"name": "rName",
"value": "rOption3",
"label": "Option 3 displaying example with a really really really long title"
},
{
"id": "rFour",
"name": "rName",
"value": "rOption4",
"label": "Option 4"
},
{
"id": "rFive",
"name": "rName",
"value": "rOption5",
"label": "Option 5"
},
{
"id": "rSix",
"name": "rName",
"value": "rOption6",
"label": "Option 6"
}
]
},
{
"type": "textarea",
"id": "tAreaLg",
"name": "tarea3",
"label": "Event description",
"hint": "Write a short summary about your event",
"error": "Specific error message",
"invalid": true,
"required": true,
"maxlength": 300
},
{
"type": "textarea",
"id": "tAreaMd",
"name": "tArea2",
"label": "Event description - medium",
"hint": "Write a short summary about your event",
"error": "Specific error message",
"invalid": true,
"required": true,
"char_count": true,
"maxlength": 200
},
{
"type": "textarea",
"id": "tAreaSm",
"name": "tArea1",
"label": "Event description - small",
"hint": "Write a short summary about your event",
"error": "Specific error message",
"invalid": true,
"required": true,
"char_count": true,
"maxlength": 100
},
{
"type": "fieldset",
"fieldset": {
"title": "Fieldset",
"sub_title": "Fieldset legend",
"fields": [
{
"type": "text",
"id": "textgroupedId1",
"name": "textgrouped1",
"label": "Text input grouped",
"error": "Specific error message",
"invalid": true,
"input_width": "small"
},
{
"type": "text",
"id": "textgroupedId2",
"name": "textgrouped2",
"hint": "Some hint",
"label": "Text input grouped",
"error": "Specific error message",
"invalid": true,
"input_width": "small"
}
]
}
},
{
"type": "checkbox",
"checkbox_link": {
"text": "Terms and conditions",
"url": "/"
},
"options": [
{
"id": "cboxConfirm",
"name": "cboxConfirmName",
"value": "cboxConfirmVal",
"label": "I agree to the terms and conditions",
"required": true,
"error": "Specific error message",
"invalid": true
}
]
}
]
}
}