University of Leeds Design System v1.0.15

Form

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

                        <label class="uol-form__input-label " for="selectID1" id="selectID1-label">
                            <span class="uol-form__input-label__text">Select typeahead (no default value)</span>

                            <span class="uol-form__input-label__hint" id="selectID1-hint">Select fruit from list, type to filter results </span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName1" id="selectID1" aria-label="Select Select typeahead (no default value)">

                                <option value="">Select an option</option>

                                <option value="AP">Apple</option>

                                <option value="BA">Banana</option>

                                <option value="CH">Cherry</option>

                                <option value="DA">Date</option>

                                <option value="MA">Mango</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 
">

                        <label class="uol-form__input-label " for="selectID1" id="selectID1-label">
                            <span class="uol-form__input-label__text">Select typeahead (default value)</span>

                            <span class="uol-form__input-label__hint" id="selectID1-hint">Select fruit from list, type to filter results </span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName1" id="selectID1" aria-label="Select Select typeahead (default value)">

                                <option value="">Select an option</option>

                                <option value="AP">Apple</option>

                                <option value="BA">Banana</option>

                                <option value="CH" selected>Cherry</option>

                                <option value="DA">Date</option>

                                <option value="MA">Mango</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 
">

                        <label class="uol-form__input-label " for="selectID4" id="selectID4-label">
                            <span class="uol-form__input-label__text">Multiselect (no default values)</span>

                            <span class="uol-form__input-label__hint" id="selectID4-hint">Select a sport </span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName3" id="selectID4" aria-label="Select Multiselect (no default values)" multiple>

                                <option value="">Select an option</option>

                                <option value="BA">Badminton</option>

                                <option value="BK">Basketball</option>

                                <option value="CR">Cricket</option>

                                <option value="CU">Curling</option>

                                <option value="CY">Cycling</option>

                                <option value="FO">Football</option>

                                <option value="GO">Golf</option>

                                <option value="TT">Table Tennis</option>

                                <option value="TE">Tennis</option>

                                <option value="WA">Walking</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 
">

                        <label class="uol-form__input-label " for="selectID4" id="selectID4-label">
                            <span class="uol-form__input-label__text">Multiselect (default values)</span>

                            <span class="uol-form__input-label__hint" id="selectID4-hint">Select a sport </span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName3" id="selectID4" aria-label="Select Multiselect (default values)" multiple>

                                <option value="">Select an option</option>

                                <option value="BA">Badminton</option>

                                <option value="BK" selected>Basketball</option>

                                <option value="CR">Cricket</option>

                                <option value="CU">Curling</option>

                                <option value="CY" selected>Cycling</option>

                                <option value="FO" selected>Football</option>

                                <option value="GO">Golf</option>

                                <option value="TT">Table Tennis</option>

                                <option value="TE">Tennis</option>

                                <option value="WA" selected>Walking</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 
">

                        <label class="uol-form__input-label " for="selectID2" id="selectID2-label">
                            <span class="uol-form__input-label__text">Multiselect, no chips, option count</span>

                            <span class="uol-form__input-label__hint" id="selectID2-hint">Select a cheese </span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName2" id="selectID2" aria-label="Select Multiselect, no chips, option count" multiple data-chips-hide>

                                <option value="">Select an option</option>

                                <option value="BRI">Brie</option>

                                <option value="CBL">Cashel Blue</option>

                                <option value="CHE">Cheddar</option>

                                <option value="CYA">Cornish Yarg</option>

                                <option value="EDA">Edam</option>

                                <option value="MAN">Manchego</option>

                                <option value="PRE">Parmigiano-Reggiano</option>

                                <option value="SBL">Shropshire Blue</option>

                                <option value="STI">Stilton</option>

                                <option value="SBI">Stinking Bishop</option>

                                <option value="WEN">Wensleydale</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--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="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--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--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 
">

                        <div id="datepickerId1" class="uol-datepicker-container" data-single-selection data-start-date="false">

                            <div class="uol-datepicker__input-group">
                                <label class="uol-datepicker__range-label" for="datepickerId1-start-date">Select date<span class="hide-accessible"> format: dd/mm/yyyy</span></label>

                                <div class="uol-datepicker__controls-wrapper">
                                    <div class="uol-datepicker__input-wrapper">
                                        <input class="uol-datepicker__input uol-datepicker__input--start" name="nameForSingle" type="text" placeholder="dd/mm/yyyy" id="datepickerId1-start-date" value="" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="uol-form__input-container 
">

                        <div id="datepickerId2" class="uol-datepicker-container" data-range-selection data-end-date=false data-start-date="false">

                            <div class="uol-datepicker__unified-input-wrapper" role="group" aria-labelledby="datepickerId2-group-label">
                                <h3 id="datepickerId2-group-label" class="hide-accessible">Date range, input start and end dates or select in the date picker</h3>

                                <div class="uol-datepicker__labels-wrapper">
                                    <label class="uol-datepicker__range-label uol-datepicker__range-label--start" for="datepickerId2-start-date">Start date<span class="hide-accessible"> format: dd/mm/yyyy</span></label>
                                    <label class="uol-datepicker__range-label uol-datepicker__range-label--end" for="datepickerId2-end-date">End date<span class="hide-accessible"> format: dd/mm/yyyy</span></label>
                                </div>
                                <div class="uol-datepicker__unified-input">
                                    <div class="uol-datepicker__input-wrapper--start">
                                        <input class="uol-datepicker__input uol-datepicker__input--start" name="nameForStart" type="text" placeholder="dd/mm/yyyy" id="datepickerId2-start-date" value="" autocomplete="off">
                                    </div>
                                    <div class="uol-datepicker__input-wrapper--end">
                                        <input class="uol-datepicker__input uol-datepicker__input--end" name="nameForEnd" type="text" placeholder="dd/mm/yyyy" id="datepickerId2-end-date" value="" autocomplete="off">
                                    </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 (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 
">

                        <label class="uol-form__input-label" for="file_upload">
                            <span class="uol-form__input-label__text">Upload files</span>

                            <span class="uol-form__input-label__hint">Hint text re file size/type </span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--file" type="file" id="file_upload" name="file upload" accept="image/png, image/jpeg" multiple>

                            <!--  -->
                        </div>

                    </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 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="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 without 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": {
      "style": "primary",
      "type": "submit",
      "content": "Submit"
    },
    "fields": [
      {
        "type": "select",
        "label": "Select typeahead (no default value)",
        "id": "selectID1",
        "name": "selectName1",
        "hint": "Select fruit from list, type to filter results",
        "options": [
          {
            "label": "Apple",
            "value": "AP"
          },
          {
            "label": "Banana",
            "value": "BA"
          },
          {
            "label": "Cherry",
            "value": "CH"
          },
          {
            "label": "Date",
            "value": "DA"
          },
          {
            "label": "Mango",
            "value": "MA"
          }
        ]
      },
      {
        "type": "select",
        "label": "Select typeahead (default value)",
        "id": "selectID1",
        "name": "selectName1",
        "hint": "Select fruit from list, type to filter results",
        "options": [
          {
            "label": "Apple",
            "value": "AP"
          },
          {
            "label": "Banana",
            "value": "BA"
          },
          {
            "label": "Cherry",
            "value": "CH",
            "selected": true
          },
          {
            "label": "Date",
            "value": "DA"
          },
          {
            "label": "Mango",
            "value": "MA"
          }
        ]
      },
      {
        "type": "select",
        "label": "Multiselect (no default values)",
        "id": "selectID4",
        "name": "selectName3",
        "hint": "Select a sport",
        "native_select": false,
        "multiple": true,
        "options": [
          {
            "label": "Badminton",
            "value": "BA"
          },
          {
            "label": "Basketball",
            "value": "BK"
          },
          {
            "label": "Cricket",
            "value": "CR"
          },
          {
            "label": "Curling",
            "value": "CU"
          },
          {
            "label": "Cycling",
            "value": "CY"
          },
          {
            "label": "Football",
            "value": "FO"
          },
          {
            "label": "Golf",
            "value": "GO"
          },
          {
            "label": "Table Tennis",
            "value": "TT"
          },
          {
            "label": "Tennis",
            "value": "TE"
          },
          {
            "label": "Walking",
            "value": "WA"
          }
        ]
      },
      {
        "type": "select",
        "label": "Multiselect (default values)",
        "id": "selectID4",
        "name": "selectName3",
        "hint": "Select a sport",
        "native_select": false,
        "multiple": true,
        "options": [
          {
            "label": "Badminton",
            "value": "BA"
          },
          {
            "label": "Basketball",
            "value": "BK",
            "selected": true
          },
          {
            "label": "Cricket",
            "value": "CR"
          },
          {
            "label": "Curling",
            "value": "CU"
          },
          {
            "label": "Cycling",
            "value": "CY",
            "selected": true
          },
          {
            "label": "Football",
            "value": "FO",
            "selected": true
          },
          {
            "label": "Golf",
            "value": "GO"
          },
          {
            "label": "Table Tennis",
            "value": "TT"
          },
          {
            "label": "Tennis",
            "value": "TE"
          },
          {
            "label": "Walking",
            "value": "WA",
            "selected": true
          }
        ]
      },
      {
        "type": "select",
        "label": "Multiselect, no chips, option count",
        "id": "selectID2",
        "name": "selectName2",
        "hint": "Select a cheese",
        "multiple": true,
        "chips_hide": true,
        "options": [
          {
            "label": "Brie",
            "value": "BRI"
          },
          {
            "label": "Cashel Blue",
            "value": "CBL"
          },
          {
            "label": "Cheddar",
            "value": "CHE"
          },
          {
            "label": "Cornish Yarg",
            "value": "CYA"
          },
          {
            "label": "Edam",
            "value": "EDA"
          },
          {
            "label": "Manchego",
            "value": "MAN"
          },
          {
            "label": "Parmigiano-Reggiano",
            "value": "PRE"
          },
          {
            "label": "Shropshire Blue",
            "value": "SBL"
          },
          {
            "label": "Stilton",
            "value": "STI"
          },
          {
            "label": "Stinking Bishop",
            "value": "SBI"
          },
          {
            "label": "Wensleydale",
            "value": "WEN"
          }
        ]
      },
      {
        "type": "text",
        "label": "Text input large",
        "name": "tInputLg",
        "id": "tInputMdLg",
        "required": true,
        "input_width": "large"
      },
      {
        "type": "text",
        "label": "Text input medium",
        "name": "tInputMd",
        "id": "tInputMdId",
        "required": true,
        "input_width": "medium"
      },
      {
        "type": "text",
        "label": "Text input small",
        "name": "tInputSm",
        "id": "tInputSmId",
        "required": true,
        "input_width": "small"
      },
      {
        "type": "text",
        "label": "Text input x-small",
        "name": "tInputXs",
        "id": "tInputXsId",
        "required": true,
        "input_width": "x-small"
      },
      {
        "type": "tel",
        "id": "telId",
        "name": "telName",
        "label": "Telephone input",
        "hint": "Telephone input hint",
        "required": true,
        "pattern": "[0-9]*",
        "input_width": "small",
        "autocomplete": "tel"
      },
      {
        "type": "tel",
        "id": "telId",
        "name": "telName",
        "label": "Telephone input",
        "hint": "Telephone input hint",
        "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",
        "required": true,
        "input_width": "medium",
        "autocomplete": "url"
      },
      {
        "type": "email",
        "id": "emailId",
        "name": "emailName",
        "label": "Email address",
        "inputmode": "email",
        "hint": "Email hint",
        "required": true,
        "input_width": "medium",
        "autocomplete": "email"
      },
      {
        "type": "time",
        "id": "timeId",
        "name": "timeName",
        "label": "Select a time",
        "hint": "Time hint",
        "invalid": false,
        "required": true,
        "input_width": "medium"
      },
      {
        "type": "inputs-inline",
        "required": 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",
            "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}",
            "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": "datepicker",
        "id": "datepickerId1",
        "start_name": "nameForSingle",
        "isDateRange": false,
        "unavailable_dates": null,
        "value": ""
      },
      {
        "type": "datepicker",
        "id": "datepickerId2",
        "start_value": "",
        "end_value": "",
        "start_name": "nameForStart",
        "end_name": "nameForEnd",
        "isDateRange": true,
        "unavailable_dates": null
      },
      {
        "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"
          }
        ],
        "required": true,
        "input_width": "medium",
        "autocomplete": "new-password"
      },
      {
        "type": "checkbox",
        "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,
        "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",
        "required": true,
        "maxlength": 300
      },
      {
        "type": "textarea",
        "id": "tAreaMd",
        "name": "tArea2",
        "label": "Event description - medium",
        "hint": "Write a short summary about your event",
        "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",
        "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",
              "input_width": "small"
            },
            {
              "type": "text",
              "id": "textgroupedId2",
              "name": "textgrouped2",
              "hint": "Some hint",
              "label": "Text input grouped",
              "input_width": "small"
            }
          ]
        }
      },
      {
        "name": "file upload",
        "type": "file",
        "label": "Upload files",
        "hint": "Hint text re file size/type",
        "id": "file_upload",
        "accept": "image/png, image/jpeg",
        "multiple": true
      },
      {
        "type": "checkbox",
        "checkbox_link": {
          "text": "Terms and conditions",
          "url": "/"
        },
        "heading_level": "h3",
        "legend": "Checkboxes",
        "hint": "Select all that apply",
        "group_label_id": "cBoxes1",
        "options": [
          {
            "id": "cboxConfirm",
            "name": "cboxConfirmName",
            "value": "cboxConfirmVal",
            "label": "I agree to the terms and conditions",
            "required": true
          }
        ]
      }
    ]
  }
}