[docs] toggle switch documentation updates (#3103)

Signed-off-by: Jeremy Wilken <[email protected]>

src/website/src/app/documentation/demos/checkboxes/checkboxes.demo.html

@@ -26,7 +26,7 @@ <h4>Basic checkbox button</h4>
 
         <h4>Labels</h4>
 
-        <p>For anything beyond a standalone checkbox button, you'll need to wrap your checkboxs with the <code class="clr-code">ClrCheckboxWrapper</code>
+        <p>For anything beyond a standalone checkbox button, you'll need to wrap your checkboxes with the <code class="clr-code">ClrCheckboxWrapper</code>
             component when you include a label. This manages the label and display of the checkbox button for you.
         </p>
 
@@ -51,7 +51,7 @@ <h4>Helper and error messages</h4>
             component. The checkbox button container tracks the the validations placed on a checkbox button, such as <code
                 class="clr-code">required</code>
             or even custom built validators in Angular. Under the hood, it looks at the <code class="clr-code">NgControl</code>
-            values to determine the control validitity, and display the helper text or error message accordingly.</p>
+            values to determine the control validity, and display the helper text or error message accordingly.</p>
 
         <p>Note: the validation in this example only displays an error after you focus and leave focus without
             selecting a value. The easiest way to do this is to highlight the text in this paragraph, and hit tab a few

src/website/src/app/documentation/demos/toggles/ng/basic.html

@@ -0,0 +1 @@
+<input type="checkbox" clrToggle />

src/website/src/app/documentation/demos/toggles/ng/disabled.html

@@ -0,0 +1,12 @@
+<clr-toggle-container>
+  <label>Disabled toggle switch example</label>
+  <clr-checkbox-wrapper>
+    <input type="checkbox" clrToggle name="options" value="option1" [(ngModel)]="options" disabled />
+    <label>Option 1</label>
+  </clr-checkbox-wrapper>
+  <clr-checkbox-wrapper>
+    <input type="checkbox" clrToggle name="options" value="option2" [(ngModel)]="options" disabled />
+    <label>Option 2</label>
+  </clr-checkbox-wrapper>
+  <clr-control-helper>Helper text</clr-control-helper>
+</clr-toggle-container>

src/website/src/app/documentation/demos/toggles/ng/helpers.html

@@ -0,0 +1,13 @@
+<clr-toggle-container>
+  <label>Full toggle switch</label>
+  <clr-toggle-wrapper>
+    <input type="checkbox" clrToggle name="options" required value="option1" [(ngModel)]="options" />
+    <label>Option 1</label>
+  </clr-toggle-wrapper>
+  <clr-toggle-wrapper>
+    <input type="checkbox" clrToggle name="options" required value="option2" [(ngModel)]="options" />
+    <label>Option 2</label>
+  </clr-toggle-wrapper>
+  <clr-control-helper>Helper text</clr-control-helper>
+  <clr-control-error>This field is required!</clr-control-error>
+</clr-toggle-container>

src/website/src/app/documentation/demos/toggles/ng/inline.html

@@ -0,0 +1,13 @@
+<clr-toggle-container clrInline>
+  <label>Inline toggle switch example</label>
+  <clr-toggle-wrapper>
+    <input type="checkbox" clrToggle name="options" required value="option1" [(ngModel)]="options" />
+    <label>Option 1</label>
+  </clr-toggle-wrapper>
+  <clr-toggle-wrapper>
+    <input type="checkbox" clrToggle name="options" required value="option2" [(ngModel)]="options" />
+    <label>Option 2</label>
+  </clr-toggle-wrapper>
+  <clr-control-helper>Helper text</clr-control-helper>
+  <clr-control-error>This field is required!</clr-control-error>
+</clr-toggle-container>

src/website/src/app/documentation/demos/toggles/ng/label.html

@@ -0,0 +1,8 @@
+<clr-toggle-wrapper>
+  <input type="checkbox" clrToggle value="option1" name="options" />
+  <label>Option 1</label>
+</clr-toggle-wrapper>
+<clr-toggle-wrapper>
+  <input type="checkbox" clrToggle value="option2" name="options" />
+  <label>Option 2</label>
+</clr-toggle-wrapper>