University of Leeds Design System v1.0.14

Form: With Form Error

Form pattern guidance

The following guidance is for content creators to ensure compliance accessibility compliance

Redundant Entry

If a user enters any form data in to a form, this data must not be asked for again within the same session. Previously entered data must be either auto-populated or available for the user to select.

  • Goal - Make it easier for users to complete multi-step processes.
  • What to do - Don’t ask for the same information twice in the same session.
  • Why it’s important - Some people with cognitive disabilities have difficulty remembering what they entered before.

Success criteria

Information previously entered by or provided to the user that is required to be entered again in the same process is either:

  • auto-populated, or
  • available for the user to select.

Except when:

  • re-entering the information is essential,
  • the information is required to ensure the security of the content, or
  • previously entered information is no longer valid.

Further information on Redundant Entry from w3.org

Accessible Authentication (Minimum)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative

Another authentication method that does not rely on a cognitive function test.

Mechanism

A mechanism is available to assist the user in completing the cognitive function test.

Object Recognition

The cognitive function test is to recognize objects.

Personal Content

The cognitive function test is to identify non-text content the user provided to the Web site.

Accessible Authentication (Enhanced)

Understanding Accessible Authentication (Enhanced)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative

Another authentication method that does not rely on a cognitive function test.

Mechanism

A mechanism is available to assist the user in completing the cognitive function test.

Further information on Accessible Authentication from w3.org 

{% extends '@uol-form' %}
 
<div class="uol-form__container uol-form-container--centered  ">

    <div class="uol-form__inner-wrapper">

        <h2 class="uol-form__title">Form components with form error</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>

        <div id="someRandomID" class="uol-form__form-error" aria-label="Error" role="alert" aria-live="polite" tabindex="-1" data-form-error="true">

            <div class="uol-form__form-error__text">There has been a problem with form submission</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>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="select1" id="selectID1" aria-label="Select Select input" required>

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

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputMdLg" name="tInputLg" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputMdId" name="tInputMd" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputSmId" name="tInputSm" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputXsId" name="tInputXs" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--tel
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--tel" type="tel" id="telId" name="telName" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--url
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--url" type="url" id="urlId" name="urlName" 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="timeId">
                            <span class="uol-form__input-label__text">Select a time (required)</span>

                            <span class="uol-form__input-label__hint">Time hint </span>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--time
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--time" type="time" id="timeId" name="timeName" value="" autocomplete="off" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--email
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--email" type="email" id="emailId" name="emailName" value="" inputmode="email" autocomplete="email" 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" 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>

                                <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=false>
                                        <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" 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>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--password
              " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--password" type="password" id="pWordId" name="pWord" 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" 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>

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

                            <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 - large (required)</span>

                            <span class="uol-form__input-label__hint">Write a short summary about your event </span>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=false>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaLg" name="tarea3" data-character-input="true" required 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>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=false>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaMd" name="tArea2" data-character-input="true" required 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>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=false>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaSm" name="tArea1" data-character-input="true" required 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>

                                </label>

                                <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                                    <!--  -->

                                    <input class="uol-form__input  uol-form__input--text" type="text" id="textgroupedId1" name="textgrouped1" 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>

                                </label>

                                <div class="uol-form__input-wrapper
               uol-form__input-wrapper--text
              " data-field-invalid=false>

                                    <!--  -->

                                    <input class="uol-form__input  uol-form__input--text" type="text" id="textgroupedId2" name="textgrouped2" 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>

                        <div class="uol-form__input--checkbox-wrapper">
                            <input class="uol-form__input--checkbox" type="checkbox" id="cboxConfirm" name="cboxConfirmName" value="" required>
                            <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>
 
{
  "form": {
    "heading_level": "h2",
    "form_centered": true,
    "action": "/example-form-action",
    "title": "Form components with form error",
    "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": {
      "style": "primary",
      "type": "submit",
      "content": "Submit"
    },
    "fields": [
      {
        "type": "select",
        "label": "Select input",
        "hint": "Select hint",
        "name": "select1",
        "id": "selectID1",
        "required": true,
        "invalid": false,
        "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,
        "invalid": false,
        "input_width": "large"
      },
      {
        "type": "text",
        "label": "Text input medium",
        "name": "tInputMd",
        "id": "tInputMdId",
        "required": true,
        "invalid": false,
        "input_width": "medium"
      },
      {
        "type": "text",
        "label": "Text input small",
        "name": "tInputSm",
        "id": "tInputSmId",
        "required": true,
        "invalid": false,
        "input_width": "small"
      },
      {
        "type": "text",
        "label": "Text input x-small",
        "name": "tInputXs",
        "id": "tInputXsId",
        "required": true,
        "invalid": false,
        "input_width": "x-small"
      },
      {
        "type": "tel",
        "id": "telId",
        "name": "telName",
        "label": "Telephone input",
        "hint": "Telephone input hint",
        "invalid": false,
        "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",
        "invalid": false,
        "required": true,
        "input_width": "medium",
        "autocomplete": "url"
      },
      {
        "type": "time",
        "id": "timeId",
        "name": "timeName",
        "label": "Select a time",
        "hint": "Time hint",
        "invalid": false,
        "required": true,
        "input_width": "medium"
      },
      {
        "type": "email",
        "id": "emailId",
        "name": "emailName",
        "label": "Email address",
        "inputmode": "email",
        "hint": "Email hint",
        "invalid": false,
        "required": true,
        "input_width": "medium",
        "autocomplete": "email"
      },
      {
        "type": "inputs-inline",
        "required": true,
        "invalid": false,
        "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",
            "minValue": 1,
            "maxValue": 31,
            "maxlength": 2,
            "pattern": "[0-9]{2}",
            "autocomplete": "bday-day",
            "required": true
          },
          {
            "id": "dobMonth",
            "name": "monthName",
            "inputmode": "numeric",
            "label": "Month",
            "minValue": 1,
            "maxValue": 12,
            "maxlength": 2,
            "pattern": "[0-9]{2}",
            "invalid": false,
            "autocomplete": "bday-month",
            "required": true
          },
          {
            "id": "dobYear",
            "name": "yearName",
            "inputmode": "numeric",
            "label": "Year",
            "minValue": 1900,
            "maxValue": 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"
          }
        ],
        "invalid": false,
        "required": true,
        "input_width": "medium",
        "autocomplete": "new-password"
      },
      {
        "type": "checkbox",
        "invalid": false,
        "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,
        "invalid": false,
        "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 - large",
        "hint": "Write a short summary about your event",
        "invalid": false,
        "required": true,
        "maxlength": 300
      },
      {
        "type": "textarea",
        "id": "tAreaMd",
        "name": "tArea2",
        "label": "Event description - medium",
        "hint": "Write a short summary about your event",
        "invalid": false,
        "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",
        "invalid": false,
        "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",
              "invalid": false,
              "input_width": "small"
            },
            {
              "type": "text",
              "id": "textgroupedId2",
              "name": "textgrouped2",
              "hint": "Some hint",
              "label": "Text input grouped",
              "invalid": false,
              "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,
            "invalid": false
          }
        ]
      }
    ],
    "form_error": "There has been a problem with form submission",
    "form_error_id": "someRandomID"
  }
}