<section class="form-wrapper">
<h2>Form title</h2>
<form action="#">
<div class="form-group">
<label for="text-single-line">Text - single line</label>
<div>
<input id="text-single-line" name="text-single-line" class="form-control" type="text" aria-label="Text - single line">
</div>
</div>
<div class="form-group">
<label for="text-single-line-placeholder">Text - single line with placeholder text</label>
<div>
<input id="text-single-line-placeholder" name="text-single-lineplaceholder" class="form-control" type="text" placeholder="This is placeholder text" aria-label="Text - single line with placeholder text">
</div>
</div>
<div class="form-group">
<label for="textarea">Text - multiple lines</label>
<div>
<textarea id="textarea" name="textarea" class="form-control" rows="3" aria-label="Text - multiple lines"></textarea>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div>
<input id="email" name="email" class="form-control" type="email" aria-label="Email">
</div>
</div>
<div class="form-group">
<label for="number">Number</label>
<div>
<input id="number" name="number" class="form-control" type="number" aria-label="Number">
</div>
</div>
<div class="form-group">
<label for="dropdown">Dropdown</label>
<div>
<select class="form-control" id="dropdown" name="dropdown">
<option value="">-- Please choose --</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
</div>
<div class="form-group">
<fieldset id="radio-single-choice">
<legend>Radio - single choice</legend>
<div>
<div class="radio radio-pretty">
<label for="radio-choice-one">
<input id="radio-choice-one" type="radio" name="radio-single-choice" value="Choice 1" aria-label="Radio - single choice - choice 1" checked>
<span></span>
Choice 1 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-two">
<input id="radio-choice-two" type="radio" name="radio-single-choice" value="Choice 2" aria-label="Radio - single choice - choice 2">
<span></span>
Choice 2 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-three">
<input id="radio-choice-three" type="radio" name="radio-single-choice" value="Choice 3" aria-label="Radio - single choice - choice 3">
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset id="radio-single-choice-inline">
<legend>Radio - single choice inline</legend>
<div>
<div class="radio radio-pretty radio-inline">
<label for="radio-choice-one-inline">
<input id="radio-choice-one-inline" type="radio" name="radio-single-choice-inline" value="Choice A" aria-label="Radio - single choice inline - choice A" checked>
<span></span>
Choice A </label>
</div>
<div class="radio radio-pretty radio-inline">
<label for="radio-choice-two-inline">
<input id="radio-choice-two-inline" type="radio" name="radio-single-choice-inline" value="Choice B" aria-label="Radio - single choice inline - choice B">
<span></span>
Choice B </label>
</div>
<div class="radio radio-pretty radio-inline">
<label for="radio-choice-three-inline">
<input id="radio-choice-three-inline" type="radio" name="radio-single-choice-inline" value="Choice C" aria-label="Radio - single choice inline - choice C">
<span></span>
Choice C </label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset id="checkbox-multiple-choice">
<legend>Checkbox - multiple choice</legend>
<div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-one">
<input id="checkbox-choice-one" type="checkbox" name="checkbox-multiple-choice" value="Choice 1" aria-label="Checkbox - multiple choice - choice 1">
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-two">
<input id="checkbox-choice-two" type="checkbox" name="checkbox-multiple-choice" value="Choice 2" aria-label="Checkbox - multiple choice - choice 2">
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-three">
<input id="checkbox-choice-three" type="checkbox" name="checkbox-multiple-choice" value="Choice 3" aria-label="Checkbox - multiple choice - choice 3">
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset id="checkbox-multiple-choice-inline">
<legend>Checkbox - multiple choice inline</legend>
<div>
<div class="checkbox checkbox-pretty checkbox-inline">
<label for="checkbox-choice-one-inline">
<input id="checkbox-choice-one-inline" type="checkbox" name="checkbox-multiple-choice-inline" value="Choice 1" aria-label="Checkbox - multiple choice inline - choice 1">
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty checkbox-inline">
<label for="checkbox-choice-two-inline">
<input id="checkbox-choice-two-inline" type="checkbox" name="checkbox-multiple-choice-inline" value="Choice 2" aria-label="Checkbox - multiple choice inline - choice 2">
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty checkbox-inline">
<label for="checkbox-choice-three-inline">
<input id="checkbox-choice-three-inline" type="checkbox" name="checkbox-multiple-choice-inline" value="Choice 3" aria-label="Checkbox - multiple choice inline - choice 3">
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<hr>
<h3>Form section - required fields</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
<div class="form-group field-required">
<label for="text-single-line-required">Text - single line required<span class="required">*</span></label>
<div>
<input id="text-single-line-required" name="text-single-line-required" class="form-control" type="" aria-label="Text - single line required" required>
</div>
</div>
<div class="form-group field-required">
<label for="textarea-required">Text - multiple lines required<span class="required">*</span></label>
<div>
<textarea id="textarea-required" name="textarea-required" class="form-control" rows="3" aria-label="Text - multiple lines required" required></textarea>
</div>
</div>
<div class="form-group field-required">
<label for="dropdown-required">Dropdown required<span class="required">*</span></label>
<div>
<select class="form-control" id="dropdown-required" name="dropdown-required" required>
<option value="">-- Please choose --</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
</div>
<div class="form-group field-required">
<fieldset id="radio-single-choice-required">
<legend>Radio - single choice required<span class="required">*</span></legend>
<div>
<div class="radio radio-pretty">
<label for="radio-choice-one-required">
<input id="radio-choice-one-required" type="radio" name="radio-single-choice-required" value="Choice 1" aria-label="Radio - single choice - choice 1" checked required>
<span></span>
Choice 1 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-two-required">
<input id="radio-choice-two-required" type="radio" name="radio-single-choice-required" value="Choice 2" aria-label="Radio - single choice - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-three-required">
<input id="radio-choice-three-required" type="radio" name="radio-single-choice-required" value="Choice 3" aria-label="Radio - single choice - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<div class="form-group field-required">
<fieldset id="checkbox-multiple-choice-required">
<legend>Checkbox - multiple choice required<span class="required">*</span></legend>
<div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-one-required">
<input id="checkbox-choice-one-required" type="checkbox" name="checkbox-multiple-choice-required" value="Choice 1" aria-label="Checkbox - multiple choice required - choice 1" required>
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-two-required">
<input id="checkbox-choice-two-required" type="checkbox" name="checkbox-multiple-choice-required" value="Choice 2" aria-label="Checkbox - multiple choice required - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-three-required">
<input id="checkbox-choice-three-required" type="checkbox" name="checkbox-multiple-choice-required" value="Choice 3" aria-label="Checkbox - multiple choice required - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<hr>
<h3>Form section - required fields - with errors</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
<div class="form-group field-required has-error">
<label for="text-single-line-required-error">Text - single line required with error<span class="required">*</span></label>
<div>
<input id="text-single-line-required-error" name="text-single-line-required-error" class="form-control" type="" aria-label="Text - single line required with error" required>
</div>
<p class="help-block">The Text - single line field is required.</p>
</div>
<div class="form-group field-required has-error">
<label for="textarea-required-error">Text - multiple lines required with error<span class="required">*</span></label>
<div>
<textarea id="textarea-required-error" name="textarea-required-error" class="form-control" rows="3" aria-label="Text - multiple lines required with error" required></textarea>
</div>
<p class="help-block">The Text - multiple lines required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<label for="dropdown-required-error">Dropdown required with error<span class="required">*</span></label>
<div>
<select class="form-control" id="dropdown-required-error" name="dropdown-required-error" required>
<option value="">-- Please choose --</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
<p class="help-block">The Dropdown required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<fieldset id="radio-single-choice-required-error">
<legend>Radio - single choice required with error<span class="required">*</span></legend>
<div>
<div class="radio radio-pretty">
<label for="radio-choice-one-required-error">
<input id="radio-choice-one-required-error" type="radio" name="radio-single-choice-required-error" value="Choice 1" aria-label="Radio - single choice required with error - choice 1" checked required>
<span></span>
Choice 1 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-two-required-error">
<input id="radio-choice-two-required-error" type="radio" name="radio-single-choice-required-error" value="Choice 2" aria-label="Radio - single choice required with error - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-three-required-error">
<input id="radio-choice-three-required-error" type="radio" name="radio-single-choice-required-error" value="Choice 3" aria-label="Radio - single choice required with error - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
<p class="help-block">The Radio - single choice required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<fieldset id="checkbox-multiple-choice-required-error">
<legend>Checkbox - multiple choice required with error<span class="required">*</span></legend>
<div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-one-required-error">
<input id="checkbox-choice-one-required-error" type="checkbox" name="checkbox-multiple-choice-required-error" value="Choice 1" aria-label="Checkbox - multiple choice required with error - choice 1" required>
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-two-required-error">
<input id="checkbox-choice-two-required-error" type="checkbox" name="checkbox-multiple-choice-required-error" value="Choice 2" aria-label="Checkbox - multiple choice required with error - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-three-required-error">
<input id="checkbox-choice-three-required-error" type="checkbox" name="checkbox-multiple-choice-required-error" value="Choice 3" aria-label="Checkbox - multiple choice required with error - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
<p class="help-block">The Checkbox - multiple choice required with error field is required.</p>
</div>
<hr>
<h3>Form section - help text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
<div class="form-group">
<label for="text-single-line-help-text">Text - single line with help text</label>
<p class="help-block">This is some help text</p>
<div>
<input id="text-single-line-help-text" name="text-single-line-help-text" class="form-control" type="" aria-label="Text - single line with help text">
</div>
</div>
<div class="form-group">
<label for="textarea-help-text">Text - multiple lines with help text</label>
<p class="help-block">This is some help text</p>
<div>
<textarea id="textarea-help-text" name="textarea-help-text" class="form-control" rows="3" aria-label="Text - multiple lines with help text"></textarea>
</div>
</div>
<div class="form-group">
<label for="dropdown-help-text">Dropdown with help text</label>
<p class="help-block">This is some help text</p>
<div>
<select class="form-control" id="dropdown-help-text" name="dropdown-help-text">
<option value="">-- Please choose --</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
</div>
<div class="form-group">
<fieldset id="radio-single-choice-help-text">
<legend>Radio - single choice with help text</legend>
<p class="help-block">This is some help text</p>
<div>
<div class="radio radio-pretty">
<label for="radio-choice-one-help-text">
<input id="radio-choice-one-help-text" type="radio" name="radio-single-choice-help-text" value="Choice 1" aria-label="Radio - single choice with help text - choice 1" checked>
<span></span>
Choice 1 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-two-help-text">
<input id="radio-choice-two-help-text" type="radio" name="radio-single-choice-help-text" value="Choice 2" aria-label="Radio - single choice with help text - choice 2">
<span></span>
Choice 2 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-three-help-text">
<input id="radio-choice-three-help-text" type="radio" name="radio-single-choice-help-text" value="Choice 3" aria-label="Radio - single choice with help text - choice 3">
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset id="checkbox-multiple-choice-help-text">
<legend>Checkbox - multiple choice with help text</legend>
<p class="help-block">This is some help text</p>
<div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-one-help-text">
<input id="checkbox-choice-one-help-text" type="checkbox" name="checkbox-multiple-choice-help-text" value="Choice 1" aria-label="Checkbox - multiple choice with help text - choice 1">
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-two-help-text">
<input id="checkbox-choice-two-help-text" type="checkbox" name="checkbox-multiple-choice-help-text" value="Choice 2" aria-label="Checkbox - multiple choice with help text - choice 2">
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-three-help-text">
<input id="checkbox-choice-three-help-text" type="checkbox" name="checkbox-multiple-choice-help-text" value="Choice 3" aria-label="Checkbox - multiple choice with help text - choice 3">
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
</div>
<hr>
<h3>Form section - required fields - with errors and help text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
<div class="form-group field-required has-error">
<label for="text-single-line-required-error-help-text">Text - single line required with error and help text<span class="required">*</span></label>
<p class="help-block">This is some help text</p>
<div>
<input id="text-single-line-required-error-help-text" name="text-single-line-required-error-help-text" class="form-control" type="" aria-label="Text - single line required with error and help text" required>
</div>
<p class="help-block">The Text - single line field is required.</p>
</div>
<div class="form-group field-required has-error">
<label for="textarea-required-error-help-text">Text - multiple lines required with error and help text<span class="required">*</span></label>
<p class="help-block">This is some help text</p>
<div>
<textarea id="textarea-required-error-help-text" name="textarea-required-error-help-text" class="form-control" rows="3" aria-label="Text - multiple lines required with error and help text" required></textarea>
</div>
<p class="help-block">The Text - multiple lines required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<label for="dropdown-required-error-help-text">Dropdown required with error and help text<span class="required">*</span></label>
<p class="help-block">This is some help text</p>
<div>
<select class="form-control" id="dropdown-required-error-help-text" name="dropdown-required-error-help-text" required>
<option value="">-- Please choose --</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
<p class="help-block">The Dropdown required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<fieldset id="radio-single-choice-required-error-help-text">
<legend>Radio - single choice required with error and help text<span class="required">*</span></legend>
<p class="help-block">This is some help text</p>
<div>
<div class="radio radio-pretty">
<label for="radio-choice-one-required-error-help-text">
<input id="radio-choice-one-required-error-help-text" type="radio" name="radio-single-choice-required-error-help-text" value="Choice 1" aria-label="Radio - single choice required with error and help text - choice 1" checked required>
<span></span>
Choice 1 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-two-required-error-help-text">
<input id="radio-choice-two-required-error-help-text" type="radio" name="radio-single-choice-required-error-help-text" value="Choice 2" aria-label="Radio - single choice required with error and help text - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="radio radio-pretty">
<label for="radio-choice-three-required-error-help-text">
<input id="radio-choice-three-required-error-help-text" type="radio" name="radio-single-choice-required-error-help-text" value="Choice 3" aria-label="Radio - single choice required with error and help text - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
<p class="help-block">The Radio - single choice required with error field is required.</p>
</div>
<div class="form-group field-required has-error">
<fieldset id="checkbox-multiple-choice-required-error-help-text">
<legend>Checkbox - multiple choice required with error and help text<span class="required">*</span></legend>
<div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-one-required-error-help-text">
<input id="checkbox-choice-one-required-error-help-text" type="checkbox" name="checkbox-multiple-choice-required-error-help-text" value="Choice 1" aria-label="Checkbox - multiple choice required with error and help text - choice 1" required>
<span></span>
Choice 1 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-two-required-error-help-text">
<input id="checkbox-choice-two-required-error-help-text" type="checkbox" name="checkbox-multiple-choice-required-error-help-text" value="Choice 2" aria-label="Checkbox - multiple choice required with error and help text - choice 2" required>
<span></span>
Choice 2 </label>
</div>
<div class="checkbox checkbox-pretty">
<label for="checkbox-choice-three-required-error-help-text">
<input id="checkbox-choice-three-required-error-help-text" type="checkbox" name="checkbox-multiple-choice-required-error-help-text" value="Choice 3" aria-label="Checkbox - multiple choice required with error and help text - choice 3" required>
<span></span>
Choice 3 </label>
</div>
</div>
</fieldset>
<p class="help-block">The Checkbox - multiple choice required with error field is required.</p>
</div>
<hr>
<div role="alert" class="alert alert-success">
Thank you, your submissions has been sent
</div>
<div role="alert" class="alert alert-danger">
Sorry, this form has now passed its closing date and is no longer accepting new responses.
</div>
<div role="alert" class="alert alert-danger" tabindex="-1" aria-describedby="form-errors">
<p id="form-errors">
<strong>Please check, and fix the following errors:</strong>
</p>
<ul>
<li>
The Full Name field is required.
</li>
<li>
The Email address field is required.
</li>
</ul>
</div>
<hr>
<div class="submitButtons">
<button class="button-yellow button-giant" role="button" type="submit" tabindex="0" data-scroll>
Book now
<span class="button-overlay"><span>
Book now
</span></span></button> </div>
</form>
</section>
<section class="form-wrapper">
<h2>Form title</h2>
<form action="#">
{% include '@input' with {
id: 'text-single-line',
name: 'text-single-line',
label: 'Text - single line',
ariaLabel: 'Text - single line',
type: 'text',
} %}
{% include '@input' with {
id: 'text-single-line-placeholder',
name: 'text-single-lineplaceholder',
label: 'Text - single line with placeholder text',
ariaLabel: 'Text - single line with placeholder text',
type: 'text',
placeholder: 'This is placeholder text',
} %}
{% include '@textarea' with {
id: 'textarea',
name: 'textarea',
label: 'Text - multiple lines',
ariaLabel: 'Text - multiple lines',
rows: 3
} %}
{% include '@input' with {
id: 'email',
name: 'email',
label: 'Email',
ariaLabel: 'Email',
type: 'email',
} %}
{% include '@input' with {
id: 'number',
name: 'number',
label: 'Number',
ariaLabel: 'Number',
type: 'number',
} %}
{% include '@dropdown' with {
id: 'dropdown',
name: 'dropdown',
label: 'Dropdown',
options : [
{
label: '2019',
value: '2019'
},
{
label: '2020',
value: '2020'
},
{
label: '2021',
value: '2021'
},
{
label: '2022',
value: '2022'
}
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice',
name: 'radio-single-choice',
label: 'Radio - single choice',
type: 'radio',
choices : [
{
id: 'radio-choice-one',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Radio - single choice - choice 1',
checked: true,
},
{
id: 'radio-choice-two',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Radio - single choice - choice 2',
},
{
id: 'radio-choice-three',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Radio - single choice - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice-inline',
name: 'radio-single-choice-inline',
label: 'Radio - single choice inline',
type: 'radio',
inline: true,
choices : [
{
id: 'radio-choice-one-inline',
label: 'Choice A',
value: 'Choice A',
ariaLabel: 'Radio - single choice inline - choice A',
checked: true,
},
{
id: 'radio-choice-two-inline',
label: 'Choice B',
value: 'Choice B',
ariaLabel: 'Radio - single choice inline - choice B',
},
{
id: 'radio-choice-three-inline',
label: 'Choice C',
value: 'Choice C',
ariaLabel: 'Radio - single choice inline - choice C',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice',
name: 'checkbox-multiple-choice',
label: 'Checkbox - multiple choice',
type: 'checkbox',
choices : [
{
id: 'checkbox-choice-one',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice - choice 1',
},
{
id: 'checkbox-choice-two',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice - choice 2',
},
{
id: 'checkbox-choice-three',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice-inline',
name: 'checkbox-multiple-choice-inline',
label: 'Checkbox - multiple choice inline',
type: 'checkbox',
inline: true,
choices : [
{
id: 'checkbox-choice-one-inline',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice inline - choice 1',
},
{
id: 'checkbox-choice-two-inline',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice inline - choice 2',
},
{
id: 'checkbox-choice-three-inline',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice inline - choice 3',
},
]
} %}
<hr>
<h3>Form section - required fields</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
{% include '@input' with {
id: 'text-single-line-required',
name: 'text-single-line-required',
label: 'Text - single line required',
ariaLabel: 'Text - single line required',
required: true,
} %}
{% include '@textarea' with {
id: 'textarea-required',
name: 'textarea-required',
label: 'Text - multiple lines required',
ariaLabel: 'Text - multiple lines required',
rows: 3,
required: true,
} %}
{% include '@dropdown' with {
id: 'dropdown-required',
name: 'dropdown-required',
label: 'Dropdown required',
required: true,
options : [
{
label: '2019',
value: '2019'
},
{
label: '2020',
value: '2020'
},
{
label: '2021',
value: '2021'
},
{
label: '2022',
value: '2022'
}
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice-required',
name: 'radio-single-choice-required',
label: 'Radio - single choice required',
type: 'radio',
required: true,
choices : [
{
id: 'radio-choice-one-required',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Radio - single choice - choice 1',
checked: true,
},
{
id: 'radio-choice-two-required',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Radio - single choice - choice 2',
},
{
id: 'radio-choice-three-required',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Radio - single choice - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice-required',
name: 'checkbox-multiple-choice-required',
label: 'Checkbox - multiple choice required',
type: 'checkbox',
required: true,
choices : [
{
id: 'checkbox-choice-one-required',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice required - choice 1',
},
{
id: 'checkbox-choice-two-required',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice required - choice 2',
},
{
id: 'checkbox-choice-three-required',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice required - choice 3',
},
]
} %}
<hr>
<h3>Form section - required fields - with errors</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
{% include '@input' with {
id: 'text-single-line-required-error',
name: 'text-single-line-required-error',
label: 'Text - single line required with error',
ariaLabel: 'Text - single line required with error',
required: true,
error: 'The Text - single line field is required.',
} %}
{% include '@textarea' with {
id: 'textarea-required-error',
name: 'textarea-required-error',
label: 'Text - multiple lines required with error',
ariaLabel: 'Text - multiple lines required with error',
rows: 3,
required: true,
error: 'The Text - multiple lines required with error field is required.',
} %}
{% include '@dropdown' with {
id: 'dropdown-required-error',
name: 'dropdown-required-error',
label: 'Dropdown required with error',
required: true,
error: 'The Dropdown required with error field is required.',
options : [
{
label: '2019',
value: '2019'
},
{
label: '2020',
value: '2020'
},
{
label: '2021',
value: '2021'
},
{
label: '2022',
value: '2022'
}
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice-required-error',
name: 'radio-single-choice-required-error',
label: 'Radio - single choice required with error',
type: 'radio',
required: true,
error: 'The Radio - single choice required with error field is required.',
choices : [
{
id: 'radio-choice-one-required-error',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Radio - single choice required with error - choice 1',
checked: true,
},
{
id: 'radio-choice-two-required-error',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Radio - single choice required with error - choice 2',
},
{
id: 'radio-choice-three-required-error',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Radio - single choice required with error - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice-required-error',
name: 'checkbox-multiple-choice-required-error',
label: 'Checkbox - multiple choice required with error',
type: 'checkbox',
required: true,
error: 'The Checkbox - multiple choice required with error field is required.',
choices : [
{
id: 'checkbox-choice-one-required-error',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice required with error - choice 1',
},
{
id: 'checkbox-choice-two-required-error',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice required with error - choice 2',
},
{
id: 'checkbox-choice-three-required-error',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice required with error - choice 3',
},
]
} %}
<hr>
<h3>Form section - help text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
{% include '@input' with {
id: 'text-single-line-help-text',
name: 'text-single-line-help-text',
label: 'Text - single line with help text',
ariaLabel: 'Text - single line with help text',
helpText: 'This is some help text',
} %}
{% include '@textarea' with {
id: 'textarea-help-text',
name: 'textarea-help-text',
label: 'Text - multiple lines with help text',
ariaLabel: 'Text - multiple lines with help text',
rows: 3,
helpText: 'This is some help text',
} %}
{% include '@dropdown' with {
id: 'dropdown-help-text',
name: 'dropdown-help-text',
label: 'Dropdown with help text',
helpText: 'This is some help text',
options : [
{
label: '2019',
value: '2019'
},
{
label: '2020',
value: '2020'
},
{
label: '2021',
value: '2021'
},
{
label: '2022',
value: '2022'
}
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice-help-text',
name: 'radio-single-choice-help-text',
label: 'Radio - single choice with help text',
type: 'radio',
helpText: 'This is some help text',
choices : [
{
id: 'radio-choice-one-help-text',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Radio - single choice with help text - choice 1',
checked: true,
},
{
id: 'radio-choice-two-help-text',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Radio - single choice with help text - choice 2',
},
{
id: 'radio-choice-three-help-text',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Radio - single choice with help text - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice-help-text',
name: 'checkbox-multiple-choice-help-text',
label: 'Checkbox - multiple choice with help text',
type: 'checkbox',
helpText: 'This is some help text',
choices : [
{
id: 'checkbox-choice-one-help-text',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice with help text - choice 1',
},
{
id: 'checkbox-choice-two-help-text',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice with help text - choice 2',
},
{
id: 'checkbox-choice-three-help-text',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice with help text - choice 3',
},
]
} %}
<hr>
<h3>Form section - required fields - with errors and help text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, sunt consectetur, corporis ipsum eveniet nemo, architecto molestias quia fuga cumque nesciunt est asperiores, doloribus amet saepe magni a neque aspernatur?</p>
{% include '@input' with {
id: 'text-single-line-required-error-help-text',
name: 'text-single-line-required-error-help-text',
label: 'Text - single line required with error and help text',
ariaLabel: 'Text - single line required with error and help text',
required: true,
error: 'The Text - single line field is required.',
helpText: 'This is some help text',
} %}
{% include '@textarea' with {
id: 'textarea-required-error-help-text',
name: 'textarea-required-error-help-text',
label: 'Text - multiple lines required with error and help text',
ariaLabel: 'Text - multiple lines required with error and help text',
rows: 3,
required: true,
error: 'The Text - multiple lines required with error field is required.',
helpText: 'This is some help text',
} %}
{% include '@dropdown' with {
id: 'dropdown-required-error-help-text',
name: 'dropdown-required-error-help-text',
label: 'Dropdown required with error and help text',
required: true,
error: 'The Dropdown required with error field is required.',
helpText: 'This is some help text',
options : [
{
label: '2019',
value: '2019'
},
{
label: '2020',
value: '2020'
},
{
label: '2021',
value: '2021'
},
{
label: '2022',
value: '2022'
}
]
} %}
{% include '@input-choice' with {
id: 'radio-single-choice-required-error-help-text',
name: 'radio-single-choice-required-error-help-text',
label: 'Radio - single choice required with error and help text',
type: 'radio',
required: true,
error: 'The Radio - single choice required with error field is required.',
helpText: 'This is some help text',
choices : [
{
id: 'radio-choice-one-required-error-help-text',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Radio - single choice required with error and help text - choice 1',
checked: true,
},
{
id: 'radio-choice-two-required-error-help-text',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Radio - single choice required with error and help text - choice 2',
},
{
id: 'radio-choice-three-required-error-help-text',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Radio - single choice required with error and help text - choice 3',
},
]
} %}
{% include '@input-choice' with {
id: 'checkbox-multiple-choice-required-error-help-text',
name: 'checkbox-multiple-choice-required-error-help-text',
label: 'Checkbox - multiple choice required with error and help text',
type: 'checkbox',
required: true,
error: 'The Checkbox - multiple choice required with error field is required.',
choices : [
{
id: 'checkbox-choice-one-required-error-help-text',
label: 'Choice 1',
value: 'Choice 1',
ariaLabel: 'Checkbox - multiple choice required with error and help text - choice 1',
},
{
id: 'checkbox-choice-two-required-error-help-text',
label: 'Choice 2',
value: 'Choice 2',
ariaLabel: 'Checkbox - multiple choice required with error and help text - choice 2',
},
{
id: 'checkbox-choice-three-required-error-help-text',
label: 'Choice 3',
value: 'Choice 3',
ariaLabel: 'Checkbox - multiple choice required with error and help text - choice 3',
},
]
} %}
<hr>
{% include '@alert' with {
text: 'Thank you, your submissions has been sent',
type: 'success',
} %}
{% include '@alert' with {
text: 'Sorry, this form has now passed its closing date and is no longer accepting new responses.',
type: 'danger',
} %}
{% include '@alert' with {
text: 'Please check, and fix the following errors:',
type: 'danger',
errors: [
'The Full Name field is required.',
'The Email address field is required.',
]
} %}
<hr>
<div class="submitButtons">
{% include '@button' with {
label: 'Book now',
href: '#',
scheme: 'yellow',
size: 'giant',
submit: true,
} %}
</div>
</form>
</section>
/* No context defined for this component. */
import whatInput from 'what-input'
Form style guide for form elements, the HTML for these elements is based on Gecko’s HTML structures.