Checkbox
item one
item two
HTML
<div class="form-item form-item__checkbox">
<div for="checkbox-toggle" class="checkbox__label selected-model" aria-label="item one">item one</div>
<label class="form-item__label toggle-checkbox">
<input type="checkbox" id="checkbox-toggle" class="type-of-model">
<span class="toggle-checkbox__slider round"></span>
</label>
<div for="checkbox-toggle" class="checkbox__label" aria-label="item two">item two</div>
</div>
Checkboxes
Checkboxes
-
Children detected!
HTML
<div class="form-item">
<div class="form-item__title">Checkboxes</div>
<div class="checkboxes" id="checkboxes1">
<ul class="checkboxes__list">
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_1"
id="checkbox_id_1"
checked
/>
<span class="checkbox__item">Checkbox 1</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_2"
id="checkbox_id_2"
/>
<span class="checkbox__item">Checkbox 2</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_3"
id="checkbox_id_3"
/>
<span class="checkbox__item">Checkbox 3</span>
</label>
</li>
<li class="checkboxes__list_item">
<div class="form-item__sub_title">Children detected!</div>
<ul class="checkboxes__children_list">
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_4"
id="checkbox_id_4"
/>
<span class="checkbox__item">Checkbox 4</span>
</label>
</li>
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_5"
id="checkbox_id_5"
/>
<span class="checkbox__item">Checkbox 5</span>
</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
Checkboxes Disabled
Checkboxes
-
Children detected!
HTML
<div class="form-item">
<div class="form-item__title">Checkboxes</div>
<div class="checkboxes" id="checkboxes1">
<ul class="checkboxes__list">
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_1"
id="checkbox_id_1"
checked
disabled="disabled"
/>
<span class="checkbox__item">Checkbox 1</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_2"
id="checkbox_id_2"
disabled="disabled"
/>
<span class="checkbox__item">Checkbox 2</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_3"
id="checkbox_id_3"
disabled="disabled"
/>
<span class="checkbox__item">Checkbox 3</span>
</label>
</li>
<li class="checkboxes__list_item">
<div class="form-item__sub_title">Children detected!</div>
<ul class="checkboxes__children_list">
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_4"
id="checkbox_id_4"
disabled="disabled"
/>
<span class="checkbox__item">Checkbox 4</span>
</label>
</li>
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_5"
id="checkbox_id_5"
disabled="disabled"
/>
<span class="checkbox__item">Checkbox 5</span>
</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
Checkboxes Error
Checkboxes
-
Children detected!
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<div class="form-item__title">Checkboxes</div>
<div class="checkboxes checkboxes--invalid" id="checkboxes1">
<ul class="checkboxes__list">
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_1"
id="checkbox_id_1"
required="required"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 1</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_2"
id="checkbox_id_2"
required="required"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 2</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_3"
id="checkbox_id_3"
required="required"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 3</span>
</label>
</li>
<li class="checkboxes__list_item">
<div class="form-item__sub_title">Children detected!</div>
<ul class="checkboxes__children_list">
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_4"
id="checkbox_id_4"
required="required"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 4</span>
</label>
</li>
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_5"
id="checkbox_id_5"
required="required"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 5</span>
</label>
</li>
</ul>
</li>
</ul>
</div>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Checkboxes Info Error
Checkboxes
-
Children detected!
You may wish to consider this
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<div class="form-item__title">Checkboxes</div>
<div class="checkboxes checkboxes--invalid" id="checkboxes1">
<ul class="checkboxes__list">
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_1"
id="checkbox_id_1"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 1</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_2"
id="checkbox_id_2"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 2</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_3"
id="checkbox_id_3"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 3</span>
</label>
</li>
<li class="checkboxes__list_item">
<div class="form-item__sub_title">Children detected!</div>
<ul class="checkboxes__children_list">
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_4"
id="checkbox_id_4"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 4</span>
</label>
</li>
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_5"
id="checkbox_id_5"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
/>
<span class="checkbox__item">Checkbox 5</span>
</label>
</li>
</ul>
</li>
</ul>
</div>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Checkboxes Info
Checkboxes
-
Children detected!
You may wish to consider this
HTML
<div class="form-item">
<div class="form-item__title">Checkboxes</div>
<div class="checkboxes" id="checkboxes1">
<ul class="checkboxes__list">
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_1"
id="checkbox_id_1"
checked
aria-describedby="idOfTheMessageGroup"
/>
<span class="checkbox__item">Checkbox 1 Checkbox 1 Checkbox 1 Checkbox 1</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_2"
id="checkbox_id_2"
aria-describedby="idOfTheMessageGroup"
/>
<span class="checkbox__item">Checkbox 2</span>
</label>
</li>
<li class="checkboxes__list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_3"
id="checkbox_id_3"
aria-describedby="idOfTheMessageGroup"
/>
<span class="checkbox__item">Checkbox 3</span>
</label>
</li>
<li class="checkboxes__list_item">
<div class="form-item__sub_title">Children detected!</div>
<ul class="checkboxes__children_list">
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_4"
id="checkbox_id_4"
aria-describedby="idOfTheMessageGroup"
/>
<span class="checkbox__item">Checkbox 4</span>
</label>
</li>
<li class="checkboxes__children_list_item">
<label class="checkboxes__item_label">
<input type="checkbox" name="checkboxes[]" value="checkbox_5"
id="checkbox_id_5"
aria-describedby="idOfTheMessageGroup"
/>
<span class="checkbox__item">Checkbox 5</span>
</label>
</li>
</ul>
</li>
</ul>
</div>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
</div>
</div>
Form Field Info Link
HTML
<div class="form-field-info-link-wrapper">
<a class="form-field-info-link" href="/link-to-privacy-notice">Privacy notice</a>
</div>
Form Field Info Link Left
HTML
<div class="form-field-info-link-wrapper form-field-info-link-wrapper--left">
<a class="form-field-info-link" href="/link-to-privacy-notice">Privacy notice</a>
</div>
Hidden Field
HTML
<input type="hidden" name="hidden" value="hello">
Honeypot
HTML
<div class="form-item visuallyhidden" aria-hidden="true">
<label for="secret_field" class="form-item__label">Please don't complete this field</label>
<input
type="email"
class="text-field text-field--email"
id="secret_field"
name="secret_field"
tabindex="-1"
/>
</div>
Select
HTML
<div class="form-item">
<label for="select1"
class="form-item__label">
Select
</label>
<select class="select"
id="select1"
name="select1"
>
<option value="2016" >2016</option>
<option value="2015" selected>2015</option>
<option value="2014" >2014</option>
</select>
</div>
Select Error
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<label for="select2"
class="form-item__label">
Select error
</label>
<select class="select select--invalid"
id="select2"
name="select2"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
>
<option value="2016" >2016</option>
<option value="2015" selected>2015</option>
<option value="2014" >2014</option>
</select>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Select Info Error
You may wish to consider this
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<label for="select2"
class="form-item__label">
Select error with additional info
</label>
<select class="select select--invalid"
id="select2"
name="select2"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
>
<option value="2016" >2016</option>
<option value="2015" selected>2015</option>
<option value="2014" >2014</option>
</select>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Select Info
You may wish to consider this
HTML
<div class="form-item">
<label for="select2"
class="form-item__label">
Select with additional info
</label>
<select class="select"
id="select2"
name="select2"
aria-describedby="idOfTheMessageGroup"
>
<option value="2016" >2016</option>
<option value="2015" selected>2015</option>
<option value="2014" >2014</option>
</select>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
</div>
</div>
Text Area
HTML
<div class="form-item">
<label
for="comment1"
class="form-item__label">
Add a comment
</label>
<textarea
type=""
class="text-field text-field--textarea"
id="comment1"
name="comment"
autofocus
cols="30"
rows="2"
required="required"
form="some_form_id"
placeholder="Type text to leave a comment"
></textarea>
</div>
Text Area Error
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<label
for="comment1"
class="form-item__label">
Text area error
</label>
<textarea
type=""
class="text-field text-field--textarea text-field--invalid"
id="comment1"
name="comment"
autofocus
cols="30"
rows="2"
required="required"
form="some_form_id"
placeholder="Type text to leave a comment"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
></textarea>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Text Area Info Error
You may wish to consider this
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<label
for="comment1"
class="form-item__label">
Text area error with additional info
</label>
<textarea
type=""
class="text-field text-field--textarea text-field--invalid"
id="comment1"
name="comment"
autofocus
cols="30"
rows="2"
required="required"
form="some_form_id"
placeholder="Type text to leave a comment"
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
></textarea>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Text Area Info
You may wish to consider this
HTML
<div class="form-item">
<label
for="comment1"
class="form-item__label">
Text area with additional info
</label>
<textarea
type=""
class="text-field text-field--textarea"
id="comment1"
name="comment"
autofocus
cols="30"
rows="2"
required="required"
form="some_form_id"
placeholder="Type text to leave a comment"
aria-describedby="idOfTheMessageGroup"
></textarea>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
</div>
</div>
Text Field
HTML
<div class="form-item">
<div class="form-item__label_container">
<label
for="emailAddress1"
class="form-item__label">
Email Address
</label>
</div>
<input
type="email"
class="text-field text-field--email"
id="emailAddress1"
name="emailAddress"
autofocus
>
</div>
Text Field Error
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<div class="form-item__label_container">
<label
for="name4"
class="form-item__label">
Error text field
</label>
</div>
<input
type="text"
class="text-field text-field--text text-field--invalid"
id="name4"
name="name"
autofocus
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Text Field Hidden Until Checked With Checkbox Id
HTML
<div class="form-item" data-behaviour="HiddenUntilChecked" data-checkbox-id="other-checkbox-id">
<div class="form-item__label_container">
<label
for="other1"
class="form-item__label visuallyhidden">
Other
</label>
</div>
<input
type="text"
class="text-field text-field--text"
id="other1"
name="other"
autofocus
>
</div>
Text Field Hidden Until Checked With Value
HTML
<div class="form-item" data-behaviour="HiddenUntilChecked">
<div class="form-item__label_container">
<label
for="other1"
class="form-item__label visuallyhidden">
Other
</label>
</div>
<input
type="text"
class="text-field text-field--text"
id="other1"
name="other"
value="value"
>
</div>
Text Field Hidden Until Checked
HTML
<div class="form-item" data-behaviour="HiddenUntilChecked">
<div class="form-item__label_container">
<label
for="other1"
class="form-item__label visuallyhidden">
Other
</label>
</div>
<input
type="text"
class="text-field text-field--text"
id="other1"
name="other"
autofocus
>
</div>
Text Field Info Error
You may wish to consider this
Please provide a valid value
HTML
<div class="form-item form-item--invalid">
<div class="form-item__label_container">
<label
for="name4"
class="form-item__label">
Error text field with additional info
</label>
</div>
<input
type="text"
class="text-field text-field--text text-field--invalid"
id="name4"
name="name"
autofocus
aria-describedby="idOfTheMessageGroup" aria-invalid="true"
>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
<div class="form-item__message form-item__message--invalid">Please provide a valid value</div>
</div>
</div>
Text Field Info
You may wish to consider this
HTML
<div class="form-item">
<div class="form-item__label_container">
<label
for="name3"
class="form-item__label">
Text field with info
</label>
</div>
<input
type="text"
class="text-field text-field--text"
id="name3"
name="name"
autofocus
aria-describedby="idOfTheMessageGroup"
>
<div id="idOfTheMessageGroup">
<div class="form-item__message form-item__message--info">You may wish to consider this</div>
</div>
</div>
Text Field With Form Field Info Link
HTML
<div class="form-item">
<div class="form-item__label_container">
<label
for="emailAddress1"
class="form-item__label">
Email Address
</label>
<div class="form-field-info-link-wrapper">
<a class="form-field-info-link" href="/privacy-notice">Privacy notice</a>
</div>
</div>
<input
type="email"
class="text-field text-field--email"
id="emailAddress1"
name="emailAddress"
autofocus
>
</div>