Form
An example of a basic form pattern, which shows how you would group inputs and set up validation.
Source
Contributors
Base
<form class="u-width-12/12 u-width-10/12@md">
<div class="o-layout">
<div class="o-layout__item u-width-12/12 u-width-6/12@md u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-type-foxtrot c-input__label" for="first-name-field">First name</label>
<div class="c-input__wrapper">
<input type="text" class="c-input__field" id="first-name-field" name="first-name" required>
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-width-6/12@md u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-type-foxtrot c-input__label" for="surname-field">Surname</label>
<div class="c-input__wrapper">
<input type="text" class="c-input__field" id="surname-field" name="surname" required>
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-type-foxtrot c-input__label" for="email-field">Email address</label>
<div class="c-input__wrapper">
<input type="email" class="c-input__field" id="email-field" name="email" required>
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-type-foxtrot c-input__label" for="contact-field">Contact number</label>
<div class="c-input__wrapper">
<input type="tel" class="c-input__field" id="contact-field" name="contact" inputmode="numeric" pattern="^(01|02|03|07)[0-9]{9}" data-patternmismatch="Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07." required>
</div>
<div class="c-input__tooltip">
<div class="c-tooltip c-tooltip--right">
<div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#info"></use></svg></div>
<div class="c-tooltip__message">
Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07.
</div>
</div>
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-mb-tiny">
<label class="c-type-foxtrot c-type--bold" for="dob-day-field">Date of birth</label>
</div>
<div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-mb-small u-mb-regular@md">
<div class="c-input" data-auto-tab="dob-month">
<label class="c-input__label" for="dob-day-field">Day</label>
<div class="c-input__wrapper">
<input type="number" class="c-input__field" id="dob-day-field" name="dob-day" max="31" placeholder="DD">
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-mb-small u-mb-regular@md">
<div class="c-input" data-auto-tab="dob-year">
<label class="c-input__label" for="dob-month-field">Month</label>
<div class="c-input__wrapper">
<input type="number" class="c-input__field" id="dob-month-field" name="dob-month" max="12" placeholder="MM">
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-input__label" for="dob-year-field">Year</label>
<div class="c-input__wrapper">
<input type="number" class="c-input__field" id="dob-year-field" name="dob-year" min="1900" max="2019" placeholder="YYYY">
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-mb-small u-mb-regular@md">
<div class="c-input">
<label class="c-type-foxtrot c-input__label" for="message-field">Your message</label>
<div class="c-input__wrapper">
<textarea class="c-input__field" id="message-field" name="message" rows="3" maxlength="100" required></textarea>
</div>
<div class="c-input__length">
<div class="c-input__length-bar" style="width: 100%;"></div>
<div class="c-input__length-text">100</div>
</div>
</div>
</div>
<div class="o-layout__item u-width-12/12 u-mb-small u-mb-regular@md">
<label class="c-type-foxtrot c-type--bold u-mb-small">What is your favourite animal?</label>
<div class="o-layout o-layout--inline@sm c-checkbox-group" data-valuemissing="Pick your favourite animal. Or else.">
<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-mb-small">
<label class="c-checkbox" tabindex="0">
<input type="radio" name="car" value="Duck" tabindex="-1" required>
<span class="c-checkbox__cover"></span>
<span class="c-checkbox__box">
<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
</span>
<span class="c-checkbox__label">Duck</span>
</label>
</div>
<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-mb-small">
<label class="c-checkbox" tabindex="0">
<input type="radio" name="car" value="Ostrich" tabindex="-1" required>
<span class="c-checkbox__cover"></span>
<span class="c-checkbox__box">
<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
</span>
<span class="c-checkbox__label">Ostrich</span>
</label>
</div>
<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-mb-small">
<label class="c-checkbox" tabindex="0">
<input type="radio" name="car" value="Rattlesnake" tabindex="-1" required>
<span class="c-checkbox__cover"></span>
<span class="c-checkbox__box">
<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
</span>
<span class="c-checkbox__label">Rattlesnake</span>
</label>
</div>
<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-mb-small">
<label class="c-checkbox" tabindex="0">
<input type="radio" name="car" value="Pig" tabindex="-1" required>
<span class="c-checkbox__cover"></span>
<span class="c-checkbox__box">
<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
</span>
<span class="c-checkbox__label">Pig</span>
</label>
</div>
<div class="o-layout__item c-checkbox-group__text c-checkbox-group__text--error u-mb-small">Error</div>
</div>
</div>
<div class="u-align-center u-width-full">
<button class="c-button u-mr-micro" type="submit">Submit</button>
<button class="c-button c-button--secondary" type="reset">Reset</button>
</div>
</div>
</form>