<div class="u-flow">
<form>
<fieldset class="c-fieldset u-flow--m u-wrap--fields">
<div>
<label class="c-label" for="text_input">Text</label>
<input type="text" class="c-input " name="text_input" placeholder="Placeholder" id="text_input" />
</div>
<div>
<label class="c-label" for="select">Select</label>
<select class="c-input c-input--select" name="select" id="select" >
<option value="">Placeholder</option>
<option value="option-1" >Option 1</option>
<option value="Option 2" >Option 2</option>
<option value="option-3" >Option 3</option>
</select>
</div>
<div>
<label class="c-label" for="textarea">Textarea</label>
<textarea class="c-input c-input--textarea" name="textarea" placeholder="Placeholder" id="textarea" ></textarea>
</div>
<label class="c-label">Checkboxes</label>
<div>
<input type="checkbox" class="c-checkbox" name="tenets" id="Live" value="Live" />
<label for="Live">Live</label>
</div>
<div>
<input type="checkbox" class="c-checkbox" name="tenets" id="Laugh" value="Laugh" />
<label for="Laugh">Laugh</label>
</div>
<div>
<input type="checkbox" class="c-checkbox" name="tenets" id="Love" value="Love" />
<label for="Love">Love</label>
</div>
<label class="c-label">Radio buttons</label>
<div>
<input type="radio" class="c-radio" name="facts" id="Bears" value="Bears" />
<label for="Bears">Bears</label>
</div>
<div>
<input type="radio" class="c-radio" name="facts" id="Beets" value="Beets" />
<label for="Beets">Beets</label>
</div>
<div>
<input type="radio" class="c-radio" name="facts" id="Battlestar Galactica" value="Battlestar Galactica" />
<label for="Battlestar Galactica">Battlestar Galactica</label>
</div>
<label class="c-label">Toggle</label>
<label for="toggle" class="c-toggle">
<input type="checkbox" class="c-toggle__checkbox" id="toggle" value="" role="switch" aria-checked="false" aria-label="Toggle" />
<span class="c-toggle__slider"></span>
<span class="c-toggle__label">Toggle</span>
</label>
</fieldset>
<hr>
<fieldset class="c-fieldset u-flow--m u-wrap--fields">
<legend id="variations"><code><input></code> variations</legend>
<div>
<label class="c-label" for="email_input">Email</label>
<input type="email" class="c-input " name="email_input" placeholder="Placeholder" id="email_input" />
</div>
<div>
<label class="c-label" for="password_input">Password</label>
<input type="password" class="c-input " name="password_input" placeholder="" id="password_input" />
</div>
<div>
<label class="c-label" for="date_input">Date</label>
<input type="date" class="c-input " name="date_input" placeholder="Placeholder" id="date_input" />
</div>
<div>
<label class="c-label" for="search_input">Search</label>
<input type="search" class="c-input " name="search_input" placeholder="Placeholder" id="search_input" />
</div>
<div>
<label class="c-label" for="tel_input">Telephone</label>
<input type="tel" class="c-input " name="tel_input" placeholder="Placeholder" id="tel_input" />
</div>
<div>
<label class="c-label" for="number_input">Number</label>
<input type="number" class="c-input " name="number_input" placeholder="Placeholder" id="number_input" />
</div>
<div>
<label class="c-label" for="file_input">File</label>
<input type="file" class="c-input c-input--file" name="file_input" placeholder="" id="file_input" />
</div>
<div>
<label class="c-label" for="range_input">Range</label>
<input type="range" class="c-input " name="range_input" placeholder="Placeholder" id="range_input" />
</div>
<div>
<label class="c-label" for="url_input">URL</label>
<input type="url" class="c-input " name="url_input" placeholder="Placeholder" id="url_input" />
</div>
<div>
<label class="c-label" for="color_input">Color</label>
<input type="color" class="c-input " name="color_input" placeholder="Placeholder" id="color_input" />
</div>
</fieldset>
<hr>
<fieldset class="c-fieldset u-flow--m u-wrap--fields">
<legend id="disabled">Disabled</legend>
<div>
<label class="c-label" for="text_input">Text</label>
<input type="text" class="c-input " name="text_input" placeholder="Placeholder" id="text_input" disabled />
</div>
<div>
<label class="c-label" for="select">Select</label>
<select class="c-input c-input--select" name="select" id="select" disabled>
<option value="">Placeholder</option>
<option value="option-1" >Option 1</option>
<option value="Option 2" >Option 2</option>
<option value="option-3" >Option 3</option>
</select>
</div>
<div>
<label class="c-label" for="textarea">Textarea</label>
<textarea class="c-input c-input--textarea" name="textarea" placeholder="Placeholder" id="textarea" disabled></textarea>
</div>
<label class="c-label">Checkboxes</label>
<div>
<input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Live--disabled" value="" disabled />
<label for="Live--disabled">Live</label>
</div>
<div>
<input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Laugh--disabled" value="" disabled />
<label for="Laugh--disabled">Laugh</label>
</div>
<div>
<input type="checkbox" class="c-checkbox" name="tenets--disabled" id="Love--disabled" value="" disabled />
<label for="Love--disabled">Love</label>
</div>
<label class="c-label">Radio buttons</label>
<div>
<input type="radio" class="c-radio" name="facts--disabled" id="Bears--disabled" value="" disabled />
<label for="Bears--disabled">Bears</label>
</div>
<div>
<input type="radio" class="c-radio" name="facts--disabled" id="Beets--disabled" value="" disabled />
<label for="Beets--disabled">Beets</label>
</div>
<div>
<input type="radio" class="c-radio" name="facts--disabled" id="Battlestar Galactica--disabled" value="" disabled />
<label for="Battlestar Galactica--disabled">Battlestar Galactica</label>
</div>
<label class="c-label">Toggle</label>
<label for="toggle--disabled" class="c-toggle">
<input type="checkbox" class="c-toggle__checkbox" id="toggle--disabled" value="" role="switch" aria-checked="false" aria-label="Toggle" disabled />
<span class="c-toggle__slider"></span>
<span class="c-toggle__label">Toggle</span>
</label>
<div>
<label class="c-label" for="email_input">Email</label>
<input type="email" class="c-input " name="email_input" placeholder="Placeholder" id="email_input" disabled />
</div>
<div>
<label class="c-label" for="password_input">Password</label>
<input type="password" class="c-input " name="password_input" placeholder="" id="password_input" disabled />
</div>
<div>
<label class="c-label" for="date_input">Date</label>
<input type="date" class="c-input " name="date_input" placeholder="Placeholder" id="date_input" disabled />
</div>
<div>
<label class="c-label" for="search_input">Search</label>
<input type="search" class="c-input " name="search_input" placeholder="Placeholder" id="search_input" disabled />
</div>
<div>
<label class="c-label" for="tel_input">Telephone</label>
<input type="tel" class="c-input " name="tel_input" placeholder="Placeholder" id="tel_input" disabled />
</div>
<div>
<label class="c-label" for="number_input">Number</label>
<input type="number" class="c-input " name="number_input" placeholder="Placeholder" id="number_input" disabled />
</div>
<div>
<label class="c-label" for="file_input">File</label>
<input type="file" class="c-input c-input--file" name="file_input" placeholder="" id="file_input" disabled />
</div>
<div>
<label class="c-label" for="range_input">Range</label>
<input type="range" class="c-input " name="range_input" placeholder="Placeholder" id="range_input" disabled />
</div>
<div>
<label class="c-label" for="url_input">URL</label>
<input type="url" class="c-input " name="url_input" placeholder="Placeholder" id="url_input" disabled />
</div>
<div>
<label class="c-label" for="color_input">Color</label>
<input type="color" class="c-input " name="color_input" placeholder="Placeholder" id="color_input" disabled />
</div>
</fieldset>
</form>
<hr>
<div class="mp c-alert c-alert--info">
<h3>To do:</h3>
<ul>
<li>Allow extra attributes for some input types (e.g. "step" on number inputs)</li>
<li>Allow state attribute, e.g. disabled, error, prefilled</li>
<li>Show/hide control on password input (optional)</li>
<li>Better design for range input</li>
<li>Better design for color input</li>
</ul>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--info">
<use xlink:href="/static/svg/sprite.svg#info"></use>
</svg>
</div>
</div>
