Add small form controls

src/components/checkboxes/index.md.njk

@@ -65,6 +65,18 @@ You can add conditionally revealing content to checkboxes, so users only see con
 
 Keep it simple - if you need to add a lot of content, consider showing it on the next page in the process instead.
 
+### Smaller checkboxes
+
+Use standard-sized checkboxes in nearly all cases. However, smaller versions work well on pages where it’s helpful to make them less visually prominent.  
+
+For example, on a page of search results, the primary user need is to see the results. Using smaller checkboxes lets users see and change search filters without distracting them from the main content. 
+
+{{ example({group: "components", item: "checkboxes", example: "small", html: true, nunjucks: true, open: false, size: "m"}) }}
+
+Small checkboxes can work well on information dense screens in services designed for repeat use, like caseworking systems.
+
+In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.
+
 ### Error messages
 
 Error messages should be styled like this:

src/components/checkboxes/small/index.njk

@@ -0,0 +1,37 @@
+---
+title: Small checkboxes
+layout: layout-example.njk
+---
+
+{% from "checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
+  idPrefix: "organisation",
+  name: "organisation",
+  classes: "govuk-checkboxes--small",
+  fieldset: {
+    legend: {
+      text: "Organisation",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "hmrc",
+      text: "HM Revenue and Customs (HMRC)"
+    },
+    {
+      value: "employment-tribunal",
+      text: "Employment Tribunal"
+    },
+    {
+      value: "MOD",
+      text: "Ministry of Defence"
+    },
+    {
+      value: "DfT",
+      text: "Department for Transport"
+    }
+  ]
+}) }}

src/components/radios/index.md.njk

@@ -84,6 +84,18 @@ Keep it simple. If you need to add a lot of content, consider showing it on the
 
 Do not use this component to add conditionally revealing content to inline radios.
 
+### Smaller radios
+
+Use standard-sized radios in nearly all cases. However, smaller versions work well on pages where it’s helpful to make them less visually prominent.  
+
+For example, on a page of search results, the primary user need is to see the results. Using smaller radios lets users see and change search filters without distracting them from the main content.
+
+{{ example({group: "components", item: "radios", example: "small", html: true, nunjucks: true, open: false, size: "m"}) }}
+
+Small radios can work well on information dense screens in services designed for repeat use, like caseworking systems. 
+
+In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times. 
+
 ### Error messages
 
 Error messages should be styled like this:

src/components/radios/small/index.njk

@@ -0,0 +1,29 @@
+---
+title: Small radios
+layout: layout-example.njk
+---
+
+{% from "radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  classes: "govuk-radios--small",
+  idPrefix: "changed-name",
+  name: "changed-name",
+  fieldset: {
+    legend: {
+      text: "Filter",
+      isPageHeading: true,
+      classes: "govuk-fieldset__legend--m"
+    }
+  },
+  items: [
+    {
+      value: "month",
+      text: "Monthly"
+    },
+    {
+      value: "year",
+      text: "Yearly"
+    }
+  ]
+}) }}