Merge pull request #303 from alphagov/add-select-box-example

Add a select box example
alphagov · Sep 7, 2016 · 9ae06af · 9ae06af
2 parents 5dbfe93 + 840bb91
commit 9ae06af
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html
@@ -141,6 +141,16 @@ <h3 class="heading-medium" id="form-select-boxes">Select boxes</h3>
     Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
   </p>
 
+  <div class="example">
+    {% include "snippets/form_select_boxes.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/form_select_boxes.html" %}
+</code>
+</pre>
+
   <p>
     <a href="https://designpatterns.hackpad.com/Select-boxes-KzQ1IRd07HL" rel="external">
       Discuss select boxes on the design patterns Hackpad

diff --git a/app/views/snippets/form_select_boxes.html b/app/views/snippets/form_select_boxes.html
@@ -0,0 +1,8 @@
+<div class="form-group">
+  <label class="form-label" for="select-box">This is the label text</label>
+  <select class="form-control" id="select-box">
+    <option>GOV.UK elements option 1</option>
+    <option>GOV.UK elements option 2</option>
+    <option>GOV.UK elements option 3</option>
+  </select>
+</div>