University of Leeds Design System v1.0.15

Form: With Errors

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 errors</h2>

        <div class="uol-form__lead">
            <p>This is an optional lead sentence. Quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
        </div>

        <div class="uol-rich-text">
            <div class="uol-form__additional-content uol-form__additional-content--before">
                <p>Lead links <a href="/">may be used to offer a user alternative pages</a></p>
                <p>Lead links <a href="/">may be used to offer a user alternative options</a></p>
            </div>
        </div>

        <form class="uol-form" action="/example-form-action">

            <div class="uol-form__input-group  uol-form__input-group--block">

            </div>

            <div class="uol-form--button-block">

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

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

                        <label class="uol-form__input-label uol-form__input-select-error" for="selectID1" id="selectID1-label">
                            <span class="uol-form__input-label__text">Select typeahead</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=true>
                            <select class="uol-form__input uol-form__input--select " name="selectName1" id="selectID1" aria-label="Select Select typeahead" aria-invalid="true">

                                <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 
 uol-form__input-container--medium">

                        <label class="uol-form__input-label uol-form__input-select-error" for="selectID4" id="selectID4-label">
                            <span class="uol-form__input-label__text">Multiselect pre-selected</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

                        <div class="uol-form__input-wrapper " data-field-invalid=true>
                            <select class="uol-form__input uol-form__input--select " name="selectName3" id="selectID4" aria-label="Select Multiselect pre-selected" aria-invalid="true" 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 
 uol-form__input-container--small">

                        <label class="uol-form__input-label uol-form__input-select-error" for="selectID1" id="selectID1-label">
                            <span class="uol-form__input-label__text">Select input (required)</span>

                            <span class="uol-form__input-label__hint" id="selectID1-hint">Select hint </span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

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

                                <option value="optionValue1">Option 1</option>

                                <option value="optionValue2">Option 2</option>

                                <option value="optionValue3">Option 3</option>

                                <option value="optionValue4">Option 4</option>

                            </select>
                            <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                                <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                            </svg>
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="tInputMdLg">
                            <span class="uol-form__input-label__text">Text input large (required)</span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputMdLg" name="tInputLg" aria-invalid="true" value="" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="tInputMdId">
                            <span class="uol-form__input-label__text">Text input medium (required)</span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputMdId" name="tInputMd" aria-invalid="true" value="" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="tInputSmId">
                            <span class="uol-form__input-label__text">Text input small (required)</span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputSmId" name="tInputSm" aria-invalid="true" value="" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="tInputXsId">
                            <span class="uol-form__input-label__text">Text input x-small (required)</span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--text" type="text" id="tInputXsId" name="tInputXs" aria-invalid="true" value="" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="telId">
                            <span class="uol-form__input-label__text">Telephone input (no hint) (required)</span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--tel" type="tel" id="telId" name="telName" aria-invalid="true" value="" pattern="[0-9]*" autocomplete="tel" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="telId">
                            <span class="uol-form__input-label__text">Telephone input (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--tel" type="tel" id="telId" name="telName" aria-invalid="true" value="" pattern="[0-9]*" autocomplete="tel" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="urlId">
                            <span class="uol-form__input-label__text">URL input (required)</span>

                            <span class="uol-form__input-label__hint">For example, https://www.example.com </span>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--url" type="url" id="urlId" name="urlName" aria-invalid="true" value="" inputmode="url" autocomplete="url" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="emailId">
                            <span class="uol-form__input-label__text">Email address (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--email" type="email" id="emailId" name="emailName" aria-invalid="true" value="" inputmode="email" autocomplete="email" required>

                            <!--  -->
                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="timeId">
                            <span class="uol-form__input-label__text">Select a time (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--time" type="time" id="timeId" name="timeName" aria-invalid="true" value="" autocomplete="off" required>

                            <!--  -->
                        </div>

                    </div>

                    <div class="uol-form__input-container 
 uol-form__input-container--x-small uol-form__input-container--multiple">

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

                            <div role="group" aria-labelledby="dobLabelID dobLabelID-hint dobLabelID-error" class="uol-form__custom-fieldset">

                                <h3 id="dobLabelID" class="uol-form__custom__legend">Inputs inline (required)</h3>

                                <span class="uol-form__input-label__hint" id="dobLabelID-hint">For example, 28 04 2022 </span>

                                <span class="uol-form__input__error" id="dobLabelID-error"><span class="hide-accessible">Error: </span>Specific error message</span>

                                <div class="uol-form__input--inline-wrapper">

                                    <div class="uol-form__input--inline-field-wrapper" data-field-invalid=false>
                                        <label class="uol-form__input-label" for="dobDay">Day</label>
                                        <input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="dayName" id="dobDay" type="text" pattern="[0-9]{2}" autocomplete="bday-day" maxlength="2" required value="">
                                    </div>

                                    <div class="uol-form__input--inline-field-wrapper" data-field-invalid=true>
                                        <label class="uol-form__input-label" for="dobMonth">Month</label>
                                        <input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="monthName" id="dobMonth" type="text" aria-invalid="true" pattern="[0-9]{2}" autocomplete="bday-month" maxlength="2" required value="">
                                    </div>

                                    <div class="uol-form__input--inline-field-wrapper" data-field-invalid=false>
                                        <label class="uol-form__input-label" for="dobYear">Year</label>
                                        <input class="uol-form__input uol-form__input--inline-field" inputmode="numeric" name="yearName" id="dobYear" type="text" pattern="[0-9]{4}" autocomplete="bday-year" maxlength="4" required value="">
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

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

                        <div id="datepickerId3" class="uol-datepicker-container" data-single-selection data-start-date="false" data-unavailable-dates="2021-12-25" data-invalid>

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

                                <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>The 25th December is unavailable</span>

                                <div class="uol-datepicker__controls-wrapper">
                                    <div class="uol-datepicker__input-wrapper">
                                        <input class="uol-datepicker__input uol-datepicker__input--start" name="nameForStart2" type="text" placeholder="dd/mm/yyyy" id="datepickerId3-start-date" value="25/12/2021" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

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

                        <div id="datepickerId4" class="uol-datepicker-container" data-range-selection data-end-date=false data-start-date="false" data-unavailable-dates="2021-12-25" data-invalid>

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

                                <span class="uol-form__input__error" id="datepickerId4-error"><span class="hide-accessible">Error: </span>The 25th December is unavailable</span>

                                <div class="uol-datepicker__labels-wrapper">
                                    <label class="uol-datepicker__range-label uol-datepicker__range-label--start" for="datepickerId4-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="datepickerId4-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="nameForStart3" type="text" placeholder="dd/mm/yyyy" id="datepickerId4-start-date" value="25/12/2021" required autocomplete="off">
                                    </div>
                                    <div class="uol-datepicker__input-wrapper--end">
                                        <input class="uol-datepicker__input uol-datepicker__input--end" name="nameForEnd3" type="text" placeholder="dd/mm/yyyy" id="datepickerId4-end-date" value="04/01/2022" required 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>

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--password" type="password" id="pWordId" name="pWord" aria-invalid="true" value="" pattern="^(?=.*?[A-Z]).{8,}$" autocomplete="new-password" required>

                            <button type="button" class="uol-form__input--password-toggle" aria-controls="pWordId" data-password-visible="false" hidden></button>

                            <!--  -->
                        </div>

                    </div>

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

                        <div role="group" aria-labelledby="cBoxes1 cBoxes1-hint cBoxes1-error" class="uol-form__custom-fieldset" data-checkboxes-required="2">

                            <span id="cBoxes1" class="uol-form__custom__legend">Checkboxes</span>

                            <span class="uol-form__input-label__hint" id="cBoxes1-hint">Select all that apply </span>

                            <span class="uol-form__input__error" id="cBoxes1-error"><span class="hide-accessible">Error: </span>Specific error message</span>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxOne" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxOne" id="cboxOne-label">Option 1</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxTwo" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxTwo" id="cboxTwo-label">Option 2</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxThree" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxThree" id="cboxThree-label">Option 3 displaying example with a really really really long title</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxFour" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxFour" id="cboxFour-label">Option 4</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxFive" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxFive" id="cboxFive-label">Option 5</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                            <div class="uol-form__input--checkbox-wrapper">
                                <input class="uol-form__input--checkbox" type="checkbox" id="cboxSix" name="cboxName" value="">
                                <label class="uol-form__input--checkbox-label" for="cboxSix" id="cboxSix-label">Option 6</label>
                                <span class="uol-form__input--checkbox-custom">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                        <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                    </svg>
                                </span>
                            </div>

                        </div>

                    </div>

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

                        <div role="radiogroup" aria-labelledby="rGroupId1 rGroupId1-hint rGroupId1-error" class="uol-form__custom-fieldset" aria-required="true">

                            <span id="rGroupId1" class="uol-form__custom__legend">Radios (required)</span>

                            <span class="uol-form__input-label__hint" id="rGroupId1-hint">Select one option. </span>

                            <span class="uol-form__input__error" id="rGroupId1-error"><span class="hide-accessible">Error: </span>Specific error message</span>

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

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rOne" name="rName" value="rOption1" checked>
                                    <label class="uol-form__input--radio__label" for="rOne">Option 1</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rTwo" name="rName" value="rOption2">
                                    <label class="uol-form__input--radio__label" for="rTwo">Option 2</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rThree" name="rName" value="rOption3">
                                    <label class="uol-form__input--radio__label" for="rThree">Option 3 displaying example with a really really really long title</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rFour" name="rName" value="rOption4">
                                    <label class="uol-form__input--radio__label" for="rFour">Option 4</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rFive" name="rName" value="rOption5">
                                    <label class="uol-form__input--radio__label" for="rFive">Option 5</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="rSix" name="rName" value="rOption6">
                                    <label class="uol-form__input--radio__label" for="rSix">Option 6</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                            </div>

                        </div>

                    </div>

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

                        <label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaLg" id="tAreaLg-label">
                            <span class="uol-form__input-label__text">Event description (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaLg" name="tarea3" data-character-input="true" required aria-invalid="true" data-textarea-height="large" data-maxlength="300"></textarea>
                        </div>

                    </div>

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

                        <label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaMd" id="tAreaMd-label">
                            <span class="uol-form__input-label__text">Event description - medium (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaMd" name="tArea2" data-character-input="true" required aria-invalid="true" data-textarea-height="medium" data-maxlength="200" data-char-limit="true" aria-labelledby="tAreaMd-label tAreaMd-char-count"></textarea>
                        </div>

                        <p class="uol-form__input--character-count" id="tAreaMd-char-count">200 character limit</p>

                    </div>

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

                        <label class="uol-form__input-label uol-form__input--teaxtarea-label" for="tAreaSm" id="tAreaSm-label">
                            <span class="uol-form__input-label__text">Event description - small (required)</span>

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

                        <div class="uol-form__input--textarea-wrapper" data-field-invalid=true>
                            <textarea class="uol-form__input uol-form__input--textarea" id="tAreaSm" name="tArea1" data-character-input="true" required aria-invalid="true" data-textarea-height="small" data-maxlength="100" data-char-limit="true" aria-labelledby="tAreaSm-label tAreaSm-char-count"></textarea>
                        </div>

                        <p class="uol-form__input--character-count" id="tAreaSm-char-count">100 character limit</p>

                    </div>

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

                        <fieldset class="uol-form__input--fieldset">
                            <legend class="uol-form__input--legend">
                                <h3 class="uol-form__input--legend-title">Fieldset</h3>
                                <span class="uol-form__input--legend-subtitle">Fieldset legend</span>
                            </legend>

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

                                <label class="uol-form__input-label" for="textgroupedId1">
                                    <span class="uol-form__input-label__text">Text input grouped</span>

                                    <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                                </label>

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

                                    <!--  -->

                                    <input class="uol-form__input  uol-form__input--text" type="text" id="textgroupedId1" name="textgrouped1" aria-invalid="true" value="" autocomplete="off">

                                    <!--  -->
                                </div>

                            </div>

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

                                <label class="uol-form__input-label" for="textgroupedId2">
                                    <span class="uol-form__input-label__text">Text input grouped</span>

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

                                    <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                                </label>

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

                                    <!--  -->

                                    <input class="uol-form__input  uol-form__input--text" type="text" id="textgroupedId2" name="textgrouped2" aria-invalid="true" value="" autocomplete="off">

                                    <!--  -->
                                </div>

                            </div>

                        </fieldset>

                    </div>

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

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

                            <span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        </label>

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

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--file" type="file" id="file_upload" name="file upload" aria-invalid="true" 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="" class="uol-form__custom__legend"></span>

                        <span class="uol-form__input__error" id="cboxConfirm-error"><span class="hide-accessible">Error: </span>Specific error message</span>

                        <div class="uol-form__input--checkbox-wrapper">
                            <input class="uol-form__input--checkbox" type="checkbox" id="cboxConfirm" name="cboxConfirmName" value="" required aria-labelledby="cboxConfirm-error cboxConfirm-label" aria-invalid="true">
                            <label class="uol-form__input--checkbox-label" for="cboxConfirm" id="cboxConfirm-label">I agree to the terms and conditions</label>
                            <span class="uol-form__input--checkbox-custom">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
                                    <path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
                                </svg>
                            </span>
                        </div>

                    </div>

                </div>

                <div class="uol-form__button-wrapper">
                    <button class="uol-button uol-button--primary
    " type="submit">Submit</button>

                </div>

            </div>

        </form>

    </div>

</div>
 
{
  "form": {
    "heading_level": "h2",
    "form_centered": true,
    "action": "/example-form-action",
    "title": "Form components with errors",
    "lead": "This is an optional lead sentence. Quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.",
    "additional_info_before": "<p>Lead links <a href=\"/\">may be used to offer a user alternative pages</a></p><p>Lead links <a href=\"/\">may be used to offer a user alternative options</a></p>",
    "button": {
      "style": "primary",
      "type": "submit",
      "content": "Submit"
    },
    "fields": [
      {
        "type": "select",
        "label": "Select typeahead",
        "id": "selectID1",
        "name": "selectName1",
        "error": "Specific error message",
        "hint": "Select fruit from list, type to filter results",
        "input_width": "small",
        "invalid": true,
        "options": [
          {
            "label": "Apple",
            "value": "AP"
          },
          {
            "label": "Banana",
            "value": "BA"
          },
          {
            "label": "Cherry",
            "value": "CH"
          },
          {
            "label": "Date",
            "value": "DA"
          },
          {
            "label": "Mango",
            "value": "MA"
          }
        ]
      },
      {
        "type": "select",
        "label": "Multiselect pre-selected",
        "id": "selectID4",
        "name": "selectName3",
        "error": "Specific error message",
        "hint": "Select a sport",
        "native_select": false,
        "multiple": true,
        "input_width": "medium",
        "invalid": 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": "Select input",
        "hint": "Select hint",
        "name": "select1",
        "id": "selectID1",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "input_width": "small",
        "options": [
          {
            "id": "option1",
            "value": "optionValue1",
            "label": "Option 1"
          },
          {
            "id": "option2",
            "value": "optionValue2",
            "label": "Option 2"
          },
          {
            "id": "option3",
            "value": "optionValue3",
            "label": "Option 3"
          },
          {
            "id": "option4",
            "value": "optionValue4",
            "label": "Option 4"
          }
        ]
      },
      {
        "type": "text",
        "label": "Text input large",
        "name": "tInputLg",
        "id": "tInputMdLg",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "input_width": "large"
      },
      {
        "type": "text",
        "label": "Text input medium",
        "name": "tInputMd",
        "id": "tInputMdId",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "input_width": "medium"
      },
      {
        "type": "text",
        "label": "Text input small",
        "name": "tInputSm",
        "id": "tInputSmId",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "input_width": "small"
      },
      {
        "type": "text",
        "label": "Text input x-small",
        "name": "tInputXs",
        "id": "tInputXsId",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "input_width": "x-small"
      },
      {
        "type": "tel",
        "id": "telId",
        "name": "telName",
        "label": "Telephone input (no hint)",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "pattern": "[0-9]*",
        "input_width": "small",
        "autocomplete": "tel"
      },
      {
        "type": "tel",
        "id": "telId",
        "name": "telName",
        "label": "Telephone input",
        "hint": "Telephone input hint",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "pattern": "[0-9]*",
        "input_width": "small",
        "autocomplete": "tel"
      },
      {
        "type": "url",
        "id": "urlId",
        "name": "urlName",
        "inputmode": "url",
        "label": "URL input",
        "hint": "For example, https://www.example.com",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "input_width": "medium",
        "autocomplete": "url"
      },
      {
        "type": "email",
        "id": "emailId",
        "name": "emailName",
        "label": "Email address",
        "inputmode": "email",
        "hint": "Email hint",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "input_width": "medium",
        "autocomplete": "email"
      },
      {
        "type": "time",
        "id": "timeId",
        "name": "timeName",
        "label": "Select a time",
        "hint": "Time hint",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "input_width": "medium"
      },
      {
        "type": "inputs-inline",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "legend": "Inputs inline",
        "heading_level": "h3",
        "group_label_id": "dobLabelID",
        "hint": "For example, 28 04 2022",
        "input_width": "x-small",
        "options": [
          {
            "id": "dobDay",
            "name": "dayName",
            "inputmode": "numeric",
            "label": "Day",
            "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": true,
            "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",
        "error": "The 25th December is unavailable",
        "id": "datepickerId3",
        "start_name": "nameForStart2",
        "value": "25/12/2021",
        "isDateRange": false,
        "unavailable_dates": [
          "2021-12-25"
        ]
      },
      {
        "type": "datepicker",
        "error": "The 25th December is unavailable",
        "id": "datepickerId4",
        "start_name": "nameForStart3",
        "end_name": "nameForEnd3",
        "start_value": "25/12/2021",
        "end_value": "04/01/2022",
        "isDateRange": true,
        "unavailable_dates": [
          "2021-12-25"
        ],
        "required": true
      },
      {
        "type": "password",
        "id": "pWordId",
        "name": "pWord",
        "label": "Password input",
        "pattern": "^(?=.*?[A-Z]).{8,}$",
        "requirements": [
          {
            "item": "Must be at least 8 characters"
          },
          {
            "item": "Must contain at least 1 uppercase letter"
          }
        ],
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "input_width": "medium",
        "autocomplete": "new-password"
      },
      {
        "type": "checkbox",
        "error": "Specific error message",
        "invalid": true,
        "heading_level": "h3",
        "legend": "Checkboxes",
        "num_required": 2,
        "hint": "Select all that apply",
        "group_label_id": "cBoxes1",
        "options": [
          {
            "id": "cboxOne",
            "name": "cboxName",
            "value": "cboxVal1",
            "label": "Option 1"
          },
          {
            "id": "cboxTwo",
            "name": "cboxName",
            "value": "cboxVal2",
            "label": "Option 2"
          },
          {
            "id": "cboxThree",
            "name": "cboxName",
            "value": "cboxVal3",
            "label": "Option 3 displaying example with a really really really long title"
          },
          {
            "id": "cboxFour",
            "name": "cboxName",
            "value": "cboxVal4",
            "label": "Option 4"
          },
          {
            "id": "cboxFive",
            "name": "cboxName",
            "value": "cboxVal5",
            "label": "Option 5"
          },
          {
            "id": "cboxSix",
            "name": "cboxName",
            "value": "cboxVal6",
            "label": "Option 6"
          }
        ]
      },
      {
        "type": "radio",
        "heading_level": "h3",
        "legend": "Radios",
        "hint": "Select one option.",
        "required": true,
        "error": "Specific error message",
        "invalid": true,
        "group_label_id": "rGroupId1",
        "options": [
          {
            "id": "rOne",
            "name": "rName",
            "value": "rOption1",
            "label": "Option 1"
          },
          {
            "id": "rTwo",
            "name": "rName",
            "value": "rOption2",
            "label": "Option 2"
          },
          {
            "id": "rThree",
            "name": "rName",
            "value": "rOption3",
            "label": "Option 3 displaying example with a really really really long title"
          },
          {
            "id": "rFour",
            "name": "rName",
            "value": "rOption4",
            "label": "Option 4"
          },
          {
            "id": "rFive",
            "name": "rName",
            "value": "rOption5",
            "label": "Option 5"
          },
          {
            "id": "rSix",
            "name": "rName",
            "value": "rOption6",
            "label": "Option 6"
          }
        ]
      },
      {
        "type": "textarea",
        "id": "tAreaLg",
        "name": "tarea3",
        "label": "Event description",
        "hint": "Write a short summary about your event",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "maxlength": 300
      },
      {
        "type": "textarea",
        "id": "tAreaMd",
        "name": "tArea2",
        "label": "Event description - medium",
        "hint": "Write a short summary about your event",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "char_count": true,
        "maxlength": 200
      },
      {
        "type": "textarea",
        "id": "tAreaSm",
        "name": "tArea1",
        "label": "Event description - small",
        "hint": "Write a short summary about your event",
        "error": "Specific error message",
        "invalid": true,
        "required": true,
        "char_count": true,
        "maxlength": 100
      },
      {
        "type": "fieldset",
        "fieldset": {
          "title": "Fieldset",
          "sub_title": "Fieldset legend",
          "fields": [
            {
              "type": "text",
              "id": "textgroupedId1",
              "name": "textgrouped1",
              "label": "Text input grouped",
              "error": "Specific error message",
              "invalid": true,
              "input_width": "small"
            },
            {
              "type": "text",
              "id": "textgroupedId2",
              "name": "textgrouped2",
              "hint": "Some hint",
              "label": "Text input grouped",
              "error": "Specific error message",
              "invalid": true,
              "input_width": "small"
            }
          ]
        }
      },
      {
        "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,
        "error": "Specific error message",
        "invalid": true
      },
      {
        "type": "checkbox",
        "checkbox_link": {
          "text": "Terms and conditions",
          "url": "/"
        },
        "options": [
          {
            "id": "cboxConfirm",
            "name": "cboxConfirmName",
            "value": "cboxConfirmVal",
            "label": "I agree to the terms and conditions",
            "required": true,
            "error": "Specific error message",
            "invalid": true
          }
        ]
      }
    ]
  }
}