diff --git a/docs/_includes/subnav-elements.html b/docs/_includes/subnav-elements.html index 42529520..21729ef2 100644 --- a/docs/_includes/subnav-elements.html +++ b/docs/_includes/subnav-elements.html @@ -13,9 +13,6 @@ Delete - - Form - Icon diff --git a/docs/_includes/subnav-form.html b/docs/_includes/subnav-form.html index 46ef68ee..76e05033 100644 --- a/docs/_includes/subnav-form.html +++ b/docs/_includes/subnav-form.html @@ -19,9 +19,6 @@ Radio - - Other - diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index ca5f36ee..616a5bf1 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -4,6 +4,8 @@ doc-tab: elements doc-subtab: form --- + + {% capture form_example %}
diff --git a/docs/documentation/form/checkbox.html b/docs/documentation/form/checkbox.html new file mode 100644 index 00000000..da2a44f6 --- /dev/null +++ b/docs/documentation/form/checkbox.html @@ -0,0 +1,78 @@ +--- +layout: documentation +doc-tab: form +doc-subtab: checkbox +--- + +{% capture checkbox_example %} + +{% endcapture %} + +{% capture checkbox_link_example %} + +{% endcapture %} + +{% capture checkbox_disabled_example %} + +{% endcapture %} + +{% include subnav-form.html %} + +
+
+

Checkbox

+

+ The 2-state checkbox in its native format +

+ +
+ +
+

+ The checkbox class is a simple wrapper around the <input type="checkbox"> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience. +

+
+ +
+
+ {{checkbox_example}} +
+
+ {% highlight html %}{{checkbox_example}}{% endhighlight %} +
+
+ +
+

+ You can add links to your checkbox, or even disable it. +

+
+ +
+
+ {{checkbox_link_example}} +
+
+ {% highlight html %}{{checkbox_link_example}}{% endhighlight %} +
+
+ +
+
+ {{checkbox_disabled_example}} +
+
+ {% highlight html %}{{checkbox_disabled_example}}{% endhighlight %} +
+
+
+
diff --git a/docs/documentation/form/radio.html b/docs/documentation/form/radio.html new file mode 100644 index 00000000..dc0df9c4 --- /dev/null +++ b/docs/documentation/form/radio.html @@ -0,0 +1,109 @@ +--- +layout: documentation +doc-tab: form +doc-subtab: radio +--- + +{% capture radio_example %} +
+ + +
+{% endcapture %} + +{% capture radio_default_example %} +
+ + +
+{% endcapture %} + +{% capture radio_disabled_example %} +
+ + + +
+{% endcapture %} + +{% include subnav-form.html %} + +
+
+

Radio

+

+ The mutually exclusive radio buttons in their native format +

+ +
+ +
+

+ The radio class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience. +

+

+ Make sure the linked radio buttons have the same value for their name HTML attribute. +

+
+ +
+
+ {{radio_example}} +
+
+ {% highlight html %}{{radio_example}}{% endhighlight %} +
+
+ +
+

+ You can check a radio button by default by adding the checked HTML attribute to the <input> element. +

+
+ +
+
+ {{radio_default_example}} +
+
+ {% highlight html %}{{radio_default_example}}{% endhighlight %} +
+
+ +
+

+ You can add disable a radio button by adding the disabled HTML attribute to both the <label> and the <input>. +

+
+ +
+
+ {{radio_disabled_example}} +
+
+ {% highlight html %}{{radio_disabled_example}}{% endhighlight %} +
+
+
+