js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 19:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

input-single ==> input-field

Browse Source
This commit is contained in:
Cory LaViska
2017-08-23 09:59:22 -04:00
parent fe124e0b13
commit 75337c6ba2
14 changed files with 106 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

20
docs/buttons.html
View File

@@ -51,7 +51,7 @@
<p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to an <code>&lt;a&gt;</code>.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button">Button</button>
</div>
@@ -62,7 +62,7 @@
&lt;button type=&quot;button&quot; class=&quot;button-lg&quot;&gt;LG Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-xl&quot;&gt;XL Button&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="button-xs">XS Button</button>
<button type="button" class="button-sm">SM Button</button>
<button type="button">Default Button</button>
@@ -74,7 +74,7 @@
<pre><code class="lang-html">&lt;button type=&quot;button&quot; disabled&gt;Disabled Button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button disabled&quot;&gt;Disabled Link&lt;/a&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" disabled>Disabled Button</button>
<a href="#" class="button disabled">Disabled Link</a>
</div>
@@ -83,7 +83,7 @@
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;active&quot;&gt;Active Button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button active&quot;&gt;Active Link&lt;/a&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="active">Active Button</button>
<a href="#" class="button active">Active Link</a>
</div>
@@ -98,7 +98,7 @@
&lt;button type=&quot;button&quot; class=&quot;button-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-dark&quot;&gt;Dark&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="button-secondary">Secondary</button>
<button type="button" class="button-success">Success</button>
<button type="button" class="button-info">Info</button>
@@ -112,7 +112,7 @@
<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-block&quot;&gt;Block Button&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="button-block">Block Button</button>
</div>
@@ -120,7 +120,7 @@
<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. Button sizing is maintained so they align properly with other buttons.</p>
<pre><code class="lang-html">&lt;a href=&quot;#&quot; class=&quot;button button-link&quot;&gt;Link Button&lt;/a&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<a href="#" class="button button-link">Link Button</a>
</div>
@@ -132,7 +132,7 @@
&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;LG&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;XL&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
@@ -149,7 +149,7 @@
&lt;button type=&quot;button&quot; class=&quot;button-loader button-light&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-dark&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<button type="button" class="button-loader button-secondary">Button</button>
<button type="button" class="button-loader button-success">Button</button>
<button type="button" class="button-loader button-info">Button</button>
@@ -167,7 +167,7 @@
&lt;input type=&quot;file&quot;&gt;
&lt;/label&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<label class="button">Select File <input type="file"></label>
</div>

4
docs/dropdowns.html
View File

@@ -64,7 +64,7 @@
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<div class="dropdown">
<button type="button" class="dropdown-trigger">Dropdown</button>
<div class="dropdown-menu">
@@ -92,7 +92,7 @@
...
&lt;/div&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<div class="dropdown dropdown-top">
<button type="button" class="dropdown-trigger">Top</button>
<div class="dropdown-menu">

68
docs/forms.html
View File

@@ -153,84 +153,84 @@
</code></pre>
<div class="two-column">
<div class="column">
<div class="input-single">
<div class="input-field">
<input type="text" class="input-xs" placeholder="XS">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-sm" placeholder="SM">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" placeholder="Default">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-lg" placeholder="LG">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-xl" placeholder="XL">
</div>
</div>
<div class="column">
<div class="input-single">
<div class="input-field">
<select class="input-xs"><option>XS</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-sm"><option>SM</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select><option>Default</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-lg"><option>LG</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-xl"><option>XL</option></select>
</div>
</div>
</div>
<p>Disabled form controls look like this:</p>
<div class="input-single">
<div class="input-field">
<input type="text" placeholder="Input" disabled>
</div>
<div class="input-single">
<div class="input-field">
<label><input type="checkbox" disabled> Checkbox</label>
<label><input type="radio" disabled> Radio</label>
</div>
<p>Read-only form controls look like this:</p>
<div class="input-single">
<div class="input-field">
<input type="text" readonly value="This is read-only">
</div>
<h3 id="form-control-spacing">Form Control Spacing</h3>
<p>For proper spacing of individual form controls, wrap them in <code>input-single</code> containers.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-single&quot;&gt;
<p>For proper spacing of individual form controls, wrap them in <code>input-field</code> containers.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-single&quot;&gt;
&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;Password&lt;/label&gt;
&lt;input type=&quot;password&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-single&quot;&gt;
&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Remember me&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-single">
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<div class="input-field">
<label><input type="checkbox"> Remember me</label>
</div>
@@ -314,7 +314,7 @@
&lt;span class=&quot;input-addon input-addon-xl&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xs">$</span>
<input type="text" class="input-xs">
@@ -322,7 +322,7 @@
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-sm">$</span>
<input type="text" class="input-sm">
@@ -330,7 +330,7 @@
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon">$</span>
<input type="text">
@@ -338,7 +338,7 @@
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-lg">$</span>
<input type="text" class="input-lg">
@@ -346,7 +346,7 @@
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xl">$</span>
<input type="text" class="input-xl">
@@ -363,46 +363,46 @@
</code></pre>
<fieldset>
<legend>Login</legend>
<div class="input-single">
<div class="input-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-single">
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<div class="input-field">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="input-single">
<div class="input-field">
<button type="button">Login</button>
</div>
</fieldset>
<h3 id="validation">Validation</h3>
<p>Form controls can be made valid or invalid using the <code>input-valid</code> and <code>input-invalid</code> modifiers. It’s better to apply modifiers to the surrounding <code>input-single</code> so labels will be styled as well, but modifiers can be applied directly to form controls as needed.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-single input-valid&quot;&gt;
<p>Form controls can be made valid or invalid using the <code>input-valid</code> and <code>input-invalid</code> modifiers. It’s better to apply modifiers to the surrounding <code>input-field</code> so labels will be styled as well, but modifiers can be applied directly to form controls as needed.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-field input-valid&quot;&gt;
&lt;label&gt;Valid&lt;/label&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-single input-invalid&quot;&gt;
&lt;div class=&quot;input-field input-invalid&quot;&gt;
&lt;label&gt;Invalid&lt;/label&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
</code></pre>
<div class="two-column">
<div class="column">
<div class="input-single input-valid">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
</div>
<div class="column">
<div class="input-single input-invalid">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>

4
docs/icons.html
View File

@@ -56,7 +56,7 @@
<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css&quot;&gt;
</code></pre>
<p>Then add icons as you normally would with <code>&lt;i class=&quot;fa fa-*&quot;&gt;&lt;/i&gt;</code>:</p>
<div class="input-single text-secondary" style="font-size: 2rem;">
<div class="input-field text-secondary" style="font-size: 2rem;">
<i class="fa fa-magic"></i>
<i class="fa fa-briefcase"></i>
<i class="fa fa-cog"></i>
@@ -71,7 +71,7 @@
<i class="fa fa-warning"></i>
</div>
<div class="input-single">
<div class="input-field">
<button type="button"><i class="fa fa-star"></i> Star</button>
<button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
<button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>

2
docs/loaders.html
View File

@@ -55,7 +55,7 @@
&lt;span class=&quot;loader loader-lg&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;loader loader-xl&quot;&gt;&lt;/span&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<span class="loader loader-xs"></span>
<span class="loader loader-sm"></span>
<span class="loader"></span>

6
docs/switches.html
View File

@@ -66,7 +66,7 @@
&lt;label for=&quot;switch-2&quot;&gt;Switch 2&lt;/label&gt;
&lt;/span&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<span class="switch">
<input type="checkbox" class="switch" id="switch-1">
<label for="switch-1">Switch 1</label>
@@ -104,7 +104,7 @@
&lt;label for=&quot;switch-xl&quot;&gt;XL&lt;/label&gt;
&lt;/span&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<span class="switch switch-xs">
<input type="checkbox" class="switch" id="switch-xs">
<label for="switch-xs">XS</label>
@@ -137,7 +137,7 @@
&lt;label for=&quot;switch-disabled&quot;&gt;Disabled&lt;/label&gt;
&lt;/span&gt;
</code></pre>
<div class="input-single">
<div class="input-field">
<span class="switch">
<input type="checkbox" class="switch" disabled id="switch-disabled">
<label for="switch-disabled">Disabled</label>

2
source/css/forms.css
View File

@@ -298,7 +298,7 @@ input[type="range"] {
}
/* Input singles */
.input-single {
.input-field {
margin-bottom: 1.5rem;
}

20
source/docs/buttons.md
View File

@@ -12,7 +12,7 @@ To create a button, use the `<button>` element or apply the `button` class to an
<button type="button">Button</button>
```
<div class="input-single">
<div class="input-field">
<button type="button">Button</button>
</div>
@@ -26,7 +26,7 @@ Use the `button-[xs|sm|lg|xl]` modifiers to change the size of a button.
<button type="button" class="button-xl">XL Button</button>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="button-xs">XS Button</button>
<button type="button" class="button-sm">SM Button</button>
<button type="button">Default Button</button>
@@ -41,7 +41,7 @@ To disable a button set the `disabled` property on `<button>` elements. You can
<a href="#" class="button disabled">Disabled Link</a>
```
<div class="input-single">
<div class="input-field">
<button type="button" disabled>Disabled Button</button>
<a href="#" class="button disabled">Disabled Link</a>
</div>
@@ -53,7 +53,7 @@ You can force buttons to have an active state by applying the `active` class.
<a href="#" class="button active">Active Link</a>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="active">Active Button</button>
<a href="#" class="button active">Active Link</a>
</div>
@@ -72,7 +72,7 @@ Use the `button-*` modifier to create variations.
<button type="button" class="button-dark">Dark</button>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="button-secondary">Secondary</button>
<button type="button" class="button-success">Success</button>
<button type="button" class="button-info">Info</button>
@@ -90,7 +90,7 @@ Use the `button-block` modifier to make a button span the entire width of its pa
<button type="button" class="button-block">Block Button</button>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="button-block">Block Button</button>
</div>
@@ -102,7 +102,7 @@ Buttons can be styled to look like normal links with the `button-link` modifier.
<a href="#" class="button button-link">Link Button</a>
```
<div class="input-single">
<div class="input-field">
<a href="#" class="button button-link">Link Button</a>
</div>
@@ -118,7 +118,7 @@ Buttons can be given a loading state with the `button-loader` modifier. This wil
<button type="button" class="button-loader button-xl">XL</button>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
@@ -138,7 +138,7 @@ Loader buttons also work with button variations.
<button type="button" class="button-loader button-dark">Button</button>
```
<div class="input-single">
<div class="input-field">
<button type="button" class="button-loader button-secondary">Button</button>
<button type="button" class="button-loader button-success">Button</button>
<button type="button" class="button-loader button-info">Button</button>
@@ -161,6 +161,6 @@ File buttons are simply `<label>` elements with the `button` class and a nested
</label>
```
<div class="input-single">
<div class="input-field">
<label class="button">Select File <input type="file"></label>
</div>

4
source/docs/dropdowns.md
View File

@@ -27,7 +27,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
</div>
```
<div class="input-single">
<div class="input-field">
<div class="dropdown">
<button type="button" class="dropdown-trigger">Dropdown</button>
<div class="dropdown-menu">
@@ -58,7 +58,7 @@ Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning o
</div>
```
<div class="input-single">
<div class="input-field">
<div class="dropdown dropdown-top">
<button type="button" class="dropdown-trigger">Top</button>
<div class="dropdown-menu">

68
source/docs/forms.md
View File

@@ -117,37 +117,37 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
<div class="two-column">
<div class="column">
<div class="input-single">
<div class="input-field">
<input type="text" class="input-xs" placeholder="XS">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-sm" placeholder="SM">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" placeholder="Default">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-lg" placeholder="LG">
</div>
<div class="input-single">
<div class="input-field">
<input type="text" class="input-xl" placeholder="XL">
</div>
</div>
<div class="column">
<div class="input-single">
<div class="input-field">
<select class="input-xs"><option>XS</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-sm"><option>SM</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select><option>Default</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-lg"><option>LG</option></select>
</div>
<div class="input-single">
<div class="input-field">
<select class="input-xl"><option>XL</option></select>
</div>
</div>
@@ -155,52 +155,52 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
Disabled form controls look like this:
<div class="input-single">
<div class="input-field">
<input type="text" placeholder="Input" disabled>
</div>
<div class="input-single">
<div class="input-field">
<label><input type="checkbox" disabled> Checkbox</label>
<label><input type="radio" disabled> Radio</label>
</div>
Read-only form controls look like this:
<div class="input-single">
<div class="input-field">
<input type="text" readonly value="This is read-only">
</div>
### Form Control Spacing
For proper spacing of individual form controls, wrap them in `input-single` containers.
For proper spacing of individual form controls, wrap them in `input-field` containers.
```html
<div class="input-single">
<div class="input-field">
<label>Name</label>
<input type="text">
</div>
<div class="input-single">
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<div class="input-field">
<label><input type="checkbox"> Remember me</label>
</div>
```
<div class="input-single">
<div class="input-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-single">
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<div class="input-field">
<label><input type="checkbox"> Remember me</label>
</div>
@@ -292,7 +292,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
</div>
```
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xs">$</span>
<input type="text" class="input-xs">
@@ -300,7 +300,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-sm">$</span>
<input type="text" class="input-sm">
@@ -308,7 +308,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon">$</span>
<input type="text">
@@ -316,7 +316,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-lg">$</span>
<input type="text" class="input-lg">
@@ -324,7 +324,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
</div>
</div>
<div class="input-single">
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xl">$</span>
<input type="text" class="input-xl">
@@ -345,35 +345,35 @@ Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` c
<fieldset>
<legend>Login</legend>
<div class="input-single">
<div class="input-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-single">
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-single">
<div class="input-field">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="input-single">
<div class="input-field">
<button type="button">Login</button>
</div>
</fieldset>
### Validation
Form controls can be made valid or invalid using the `input-valid` and `input-invalid` modifiers. It’s better to apply modifiers to the surrounding `input-single` so labels will be styled as well, but modifiers can be applied directly to form controls as needed.
Form controls can be made valid or invalid using the `input-valid` and `input-invalid` modifiers. It’s better to apply modifiers to the surrounding `input-field` so labels will be styled as well, but modifiers can be applied directly to form controls as needed.
```html
<div class="input-single input-valid">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
<div class="input-single input-invalid">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>
@@ -381,14 +381,14 @@ Form controls can be made valid or invalid using the `input-valid` and `input-in
<div class="two-column">
<div class="column">
<div class="input-single input-valid">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
</div>
<div class="column">
<div class="input-single input-invalid">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>

4
source/docs/icons.md
View File

@@ -22,7 +22,7 @@ You can load Font Awesome locally or via CDN. To use the CDN version, add this t
Then add icons as you normally would with `<i class="fa fa-*"></i>`:
<div class="input-single text-secondary" style="font-size: 2rem;">
<div class="input-field text-secondary" style="font-size: 2rem;">
<i class="fa fa-magic"></i>
<i class="fa fa-briefcase"></i>
<i class="fa fa-cog"></i>
@@ -37,7 +37,7 @@ Then add icons as you normally would with `<i class="fa fa-*"></i>`:
<i class="fa fa-warning"></i>
</div>
<div class="input-single">
<div class="input-field">
<button type="button"><i class="fa fa-star"></i> Star</button>
<button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
<button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>

2
source/docs/loaders.md
View File

@@ -15,7 +15,7 @@ Create a pure CSS loader by applying the `loader` class to an empty `<span>` ele
<span class="loader loader-lg"></span>
<span class="loader loader-xl"></span>
```
<div class="input-single">
<div class="input-field">
<span class="loader loader-xs"></span>
<span class="loader loader-sm"></span>
<span class="loader"></span>

6
source/docs/switches.md
View File

@@ -28,7 +28,7 @@ The markup for a switch looks like this:
</span>
```
<div class="input-single">
<div class="input-field">
<span class="switch">
<input type="checkbox" class="switch" id="switch-1">
<label for="switch-1">Switch 1</label>
@@ -69,7 +69,7 @@ Use the `switch-[xs|sm|lg|xl]` modifiers to change the size of a switch.
</span>
```
<div class="input-single">
<div class="input-field">
<span class="switch switch-xs">
<input type="checkbox" class="switch" id="switch-xs">
<label for="switch-xs">XS</label>
@@ -105,7 +105,7 @@ Disabled switches are dimmed out. To disable a switch, add the `disabled` attrib
</span>
```
<div class="input-single">
<div class="input-field">
<span class="switch">
<input type="checkbox" class="switch" disabled id="switch-disabled">
<label for="switch-disabled">Disabled</label>