No notes defined.
{% 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--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>
<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": "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
}
]
}
]
}
}