Browse Source

Added docs section for HTML labels

This will make it easier in the future to test that we support labels,
and it tells people who are looking to confirm that we support labels
that we in fact do.
Kevin Brown 9 years ago
parent
commit
3bc7f4ac78
1 changed files with 35 additions and 2 deletions
  1. 35 2
      docs/_includes/examples/basics.html

+ 35 - 2
docs/_includes/examples/basics.html

@@ -59,6 +59,39 @@ $(".js-example-basic-multiple").select2();
   <option value="WY">Wyoming</option>
 </select>
 {% endhighlight %}
-</section>
 
-</section>
+  <h2>Select boxes with labels</h2>
+
+  <p>
+    You can, and should, use a <code>&lt;label&gt;</code> with Select2, just like any other <code>&lt;select&gt</code> element.
+  </p>
+
+  <div class="s2-example">
+    <p>
+      <label for="id_label_single">
+        Click this to highlight the single select element
+        <select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
+      </label>
+    </p>
+    <p>
+      <label for="id_label_multiple">
+        Click this to highlight the multiple select element
+        <select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
+      </label>
+    </p>
+  </div>
+
+{% highlight html linenos %}
+<label for="id_label_single">
+  Click this to highlight the single select element
+
+  <select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
+</label>
+
+<label for="id_label_multiple">
+  Click this to highlight the multiple select element
+
+  <select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
+</label>
+{% endhighlight %}
+</section>