+
National Insurance number
- It'll be on your last payslip. For example, JH 21 90 0A.
+
+ It's on your National Insurance card, benefit letter, payslip or P60.
+
-{{/htmlencode}}
-
-
-
-
-
- Ensure there is sufficient spacing between form elements.
-
-
-{{#htmlencode}}
-
+ <label class="form-label" for="ni-number">
+ National Insurance number
+ <span class="form-hint">
+ It's on your National Insurance card, benefit letter, payslip or P60.
+ <br>
+ For example, ‘QQ 12 34 56 C’.
+ </span>
+</label>
+<input class="form-control" id="ni-number" type="text">
+
+
+
+
+
+
+ Ensure there is sufficient spacing between form elements.
+
+
+
+
+
+
+ <!-- Use .form-group to create spacing when wrapping label and input pairs -->
+<div class="form-group">
+ <label class="form-label" for="first-name-2">First name</label>
+ <input class="form-control" id="first-name-2" name="first-name-2" type="text">
+</div>
+<div class="form-group">
+ <label class="form-label" for="last-name-2">Last name</label>
+ <input class="form-control" id="last-name-2" name="last-name-2" type="text">
+</div>
+
-
-
- Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.
-
+
+
A control that lets the user select a file.
-
-
- Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
-
+
-
-
- use these to let users choose a single option from a list
- for more than two options, radio buttons should be stacked
- radio buttons with large hit areas are easier to select with a mouse or touch devices
-
+
+
+ <div class="form-group">
+ <label class="form-label" for="file-input">
+ Upload a file
+ </label>
+ <input type="file" id="file-input">
+</div>
-Inline radio buttons
-
-{{#htmlencode}}
-
+ <h1 class="heading-medium">
Do you already have a personal user account?
-
+</h1>
-
-{{/htmlencode}}
-Stacked radio buttons
-
-{{#htmlencode}}
-Where do you live?
-
-
-{{/htmlencode}}
-
-
- use these to select either on/off toggles or multiple selections
- make it clear with words when users can select one or multiple options
-
+
+
+ use these to select either on/off toggles or multiple selections
+ make it clear with words when users can select one or multiple options
+
-Stacked checkboxes
-
+
+
+
+ <h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
+<p>Select all that apply</p>
+
+<form>
+ <fieldset>
+
+ <legend class="visually-hidden">Which types of waste do you transport regularly?</legend>
+
+ <div class="multiple-choice">
+ <input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">
+ <label for="waste-type-1">Waste from animal carcasses</label>
+ </div>
+ <div class="multiple-choice">
+ <input id="waste-type-2" name="waste-types" type="checkbox" value="waste-mines">
+ <label for="waste-type-2">Waste from mines or quarries</label>
+ </div>
+ <div class="multiple-choice">
+ <input id="waste-type-3" name="waste-types" type="checkbox" value="waste-farm-agricultural">
+ <label for="waste-type-3">Farm or agricultural waste</label>
+ </div>
+
+ </fieldset>
+</form>
+
-Inline checkboxes
-
- large hit areas aren't always appropriate
- only pre-select options if there's a strong, user-centred reason to
-
+
+ Only pre-select options if there’s a strong, user-centred reason to.
+
-
-
+
+
-{{#htmlencode}}
-Enter your telephone number
-
-
-{{/htmlencode}}
+ <div class="form-group">
+ <label class="form-label" for="telephone-number">Enter your telephone number</label>
+ <input class="form-control" id="telephone-number" name="telephone-number" type="text">
+</div>
+<div class="multiple-choice">
+ <input id="checkbox-telephone-number" name="contact-by-text-phone" type="checkbox" value="true">
+ <label for="checkbox-telephone-number">I need to be contacted using a text phone</label>
+</div>
+
-
- Discuss radio buttons and checkboxes on the design patterns Hackpad
-
-
-
-
- Conditionally revealing content
-
-
- reveal additional questions, depending on the context
- insets are used to emphasise this supporting information
-
-
-
-
- Discuss conditional form fields on the design patterns Hackpad
+
+ Discuss radio buttons and checkboxes on the design patterns Hackpad
-
- Radio buttons
-
-
- Click on "Yes" to see how this works.
-
-
-
-{{/htmlencode}}
-
- Checkboxes
-
-
- Click on "Citizen of a different country" to see how this works.
-
-
-
-
-
-{{#htmlencode}}
-
+
+ Checkboxes
+
+
+ Click on "Citizen of a different country" to see how this works.
+
+
+
What is your nationality?
@@ -593,41 +674,71 @@ title: Elements
-{{/htmlencode}}
+
+
+
+ <h1 class="heading-medium">
+ What is your nationality?
+</h1>
+<p>
+ Select all options that are relevant to you.
+</p>
+
+<form>
+ <div class="form-group">
+ <fieldset>
+
+ <legend class="visually-hidden">What is your nationality?</legend>
+
+ <div class="multiple-choice">
+ <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
+ <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
+ </div>
+ <div class="multiple-choice">
+ <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
+ <label for="nationalities-irish">Irish</label>
+ </div>
+ <div class="multiple-choice" data-target="example-different-country">
+ <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
+ <label for="nationalities-other">Citizen of a different country</label>
+ </div>
+ <div class="panel panel-border-narrow js-hidden" id="example-different-country">
+ <label class="form-label" for="nationalities-other-country">Country name</label>
+ <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
+ </div>
+
+ </fieldset>
+ </div>
+</form>
+
-
-Examples
-
diff --git a/src/elements/govuk/forms/info.yaml b/src/elements/govuk/forms/info.yaml
index 3f9460c..6c124a4 100644
--- a/src/elements/govuk/forms/info.yaml
+++ b/src/elements/govuk/forms/info.yaml
@@ -7,5 +7,4 @@ dependencies:
- elements/govuk/core
- elements/govuk/layout
- elements/govuk/panels
- - elements/govuk/forms/selection-buttons
- elements/govuk/forms/toggle-content
diff --git a/src/elements/govuk/forms/selection-buttons/README.md b/src/elements/govuk/forms/selection-buttons/README.md
deleted file mode 100644
index dc86e01..0000000
--- a/src/elements/govuk/forms/selection-buttons/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Toggle content
-Vanilla JS port of SelectionButtons from https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/selection-buttons.js
diff --git a/src/elements/govuk/forms/selection-buttons/SelectionButtons.js b/src/elements/govuk/forms/selection-buttons/SelectionButtons.js
deleted file mode 100644
index 2b111f0..0000000
--- a/src/elements/govuk/forms/selection-buttons/SelectionButtons.js
+++ /dev/null
@@ -1,98 +0,0 @@
-var closest = require('closest');
-var extend = require('extend');
-
-function SelectionButtons(element, config) {
-
- var options = {
- selectedClass: 'selected',
- focusedClass: 'focused'
- };
-
- extend(options, config);
-
- // Private variables
- var label;
- var form;
-
- /**
- * Set everything up
- */
- function create() {
-
- // Bail out if we don't have the proper element to act upon
- if (!element) {
- return;
- }
-
- label = closest(element, 'label');
- form = closest(element, 'form');
-
- if(element.checked) {
- markSelected();
- }
-
- element.addEventListener('click', clickHandler);
- element.addEventListener('focus', focusHandler);
- element.addEventListener('blur', focusHandler);
- }
-
- function markFocused(state) {
- if (state === 'focused') {
- label.classList.add(options.focusedClass);
- } else {
- label.classList.remove(options.focusedClass);
- }
- }
-
- function markSelected() {
- var radioName;
-
- if(element.type === 'radio') {
- radioName = element.name;
-
- var radioGroup = form.querySelectorAll('input[name="' + radioName + '"]');
-
- [].forEach.call(radioGroup, function(radio) {
- closest(radio, 'label').classList.remove(options.selectedClass);
- });
-
- label.classList.add(options.selectedClass);
-
- } else { // checkbox
- if (element.checked) {
- label.classList.add(options.selectedClass);
- } else {
- label.classList.remove(options.selectedClass);
- }
- }
- }
-
- function clickHandler() {
- markSelected();
- }
-
- function focusHandler(e) {
- var state = (e.type === 'focus') ? 'focused' : 'blurred';
-
- markFocused(state);
- }
-
- /**
- * Tear everything down again
- */
- function destroy() {
- element.removeEventListener('click', clickHandler);
- element.removeEventListener('focus', focusHandler);
- element.removeEventListener('blur', focusHandler);
- }
-
- var self = {
- create: create,
- destroy: destroy
- };
-
- return self;
-
-}
-
-module.exports = SelectionButtons;
diff --git a/src/elements/govuk/forms/selection-buttons/controller.js b/src/elements/govuk/forms/selection-buttons/controller.js
deleted file mode 100644
index f8c977b..0000000
--- a/src/elements/govuk/forms/selection-buttons/controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-var SelectionButtons = require('./SelectionButtons');
-
-var blockLabels = document.querySelectorAll('.block-label input[type="radio"], .block-label input[type="checkbox"]');
-[].forEach.call(blockLabels, function(blockLabel){
- var instance = new SelectionButtons(blockLabel);
- instance.create();
-});
diff --git a/src/elements/govuk/forms/selection-buttons/info.yaml b/src/elements/govuk/forms/selection-buttons/info.yaml
deleted file mode 100644
index 891adb6..0000000
--- a/src/elements/govuk/forms/selection-buttons/info.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-name: Selection buttons
-categories:
- primary: Govuk
- secondary: Core
diff --git a/src/elements/govuk/forms/style.scss b/src/elements/govuk/forms/style.scss
index 74b8f67..8c7eb94 100644
--- a/src/elements/govuk/forms/style.scss
+++ b/src/elements/govuk/forms/style.scss
@@ -1,5 +1,5 @@
@import "node_modules/govuk-elements-sass/public/sass/elements/forms";
-@import "node_modules/govuk-elements-sass/public/sass/elements/forms/form-block-labels";
+@import "node_modules/govuk-elements-sass/public/sass/elements/forms/form-multiple-choice";
@import "node_modules/govuk-elements-sass/public/sass/elements/forms/form-date";
@import "node_modules/govuk-elements-sass/public/sass/elements/forms/form-validation";
diff --git a/src/elements/govuk/header/template.hbs b/src/elements/govuk/header/template.hbs
index f019d96..495b614 100644
--- a/src/elements/govuk/header/template.hbs
+++ b/src/elements/govuk/header/template.hbs
@@ -14,7 +14,7 @@