spectre.css
Version:
Spectre.css: A lightweight, responsive and modern CSS framework
743 lines (741 loc) • 74.1 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Forms - Elements - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="author" content="Yan Zhu">
<meta property="og:url" content="https://picturepan2.github.io/spectre/elements/forms.html">
<meta property="og:title" content="Forms - Elements - Spectre.css CSS Framework">
<meta property="og:description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@spectrecss">
<meta name="twitter:creator" content="@picturepan2">
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
<link rel="icon" href="../img/favicons/favicon.png">
<link rel="stylesheet" href="../dist/spectre.min.css">
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
<link rel="stylesheet" href="../dist/docs.min.css">
<link rel="canonical" href="https://picturepan2.github.io/spectre/elements/forms.html">
</head>
<body>
<div class="docs-container off-canvas off-canvas-sidebar-show">
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
<div class="btns d-flex">
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
</div>
</div>
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
</div>
<div class="docs-nav">
<div class="accordion-container">
<div class="accordion">
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
</li>
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
</li>
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
</li>
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
</li>
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
</li>
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
</li>
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
</li>
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
</li>
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
</li>
<li class="menu-item"><a href="../elements/code.html">Code</a>
</li>
<li class="menu-item"><a href="../elements/media.html">Media</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
</li>
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
</li>
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
</li>
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-components">Components</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
</li>
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
</li>
<li class="menu-item"><a href="../components/badges.html">Badges</a>
</li>
<li class="menu-item"><a href="../components/bars.html">Bars</a>
</li>
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
</li>
<li class="menu-item"><a href="../components/cards.html">Cards</a>
</li>
<li class="menu-item"><a href="../components/chips.html">Chips</a>
</li>
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
</li>
<li class="menu-item"><a href="../components/menu.html">Menu</a>
</li>
<li class="menu-item"><a href="../components/modals.html">Modals</a>
</li>
<li class="menu-item"><a href="../components/nav.html">Nav</a>
</li>
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
</li>
<li class="menu-item"><a href="../components/panels.html">Panels</a>
</li>
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
</li>
<li class="menu-item"><a href="../components/steps.html">Steps</a>
</li>
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
</li>
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
</li>
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
</li>
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
</li>
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
</li>
<li class="menu-item"><a href="../utilities/display.html">Display</a>
</li>
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
</li>
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
</li>
<li class="menu-item"><a href="../utilities/position.html">Position</a>
</li>
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
</li>
<li class="menu-item"><a href="../utilities/text.html">Text</a>
</li>
</ul>
</div>
</div>
<div class="accordion">
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
<div class="accordion-body">
<ul class="menu menu-nav">
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
</li>
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
</li>
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
</li>
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
</li>
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
</li>
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
</li>
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
</li>
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
</li>
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
</li>
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
</li>
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
<div class="container" id="forms">
<h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a></h3>
<div class="docs-ad">
<div class="hide-md text-center">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="show-md text-center">
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
<h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
<label class="form-label" for="input-example-1">Name</label>
<input class="form-input" id="input-example-1" type="text" placeholder="Name">
</div>
<div class="form-group">
<label class="form-label" for="input-example-2">Email</label>
<input class="form-input" id="input-example-2" type="email" placeholder="Email">
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
<label class="form-label" for="input-example-3">Message</label>
<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form textarea control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
<select class="form-select">
<option>Choose an option</option>
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
<div class="form-group">
<select class="form-select" multiple="">
<option>Choose an option</option>
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form select control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<form>
<div class="form-group">
<label class="form-label">Gender</label>
<label class="form-radio">
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
</label>
<label class="form-radio">
<input type="radio" name="gender"><i class="form-icon"></i> Female
</label>
</div>
</form>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form radio control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
<label class="form-switch">
<input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
</label>
</div>
<div class="form-group">
<label class="form-switch">
<input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
</label>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form switch control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="form-group">
<label class="form-checkbox">
<input type="checkbox"><i class="form-icon"></i> Remember me
</label>
</div>
<div class="form-group">
<label class="form-checkbox">
<input type="checkbox" checked=""><i class="form-icon"></i> Remember me
</label>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form checkbox control --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<div class="docs-demo columns">
<div class="column">
<div class="form-group">
<label class="form-checkbox">
<input id="docs-demo-checkbox" type="checkbox"><i class="form-icon"></i> Select all
</label>
</div>
</div>
</div>
<script>
document.getElementById("docs-demo-checkbox").indeterminate = true;
</script>
<p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p>
<h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<form>
<div class="form-group">
<label class="form-radio form-inline">
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
</label>
<label class="form-radio form-inline">
<input type="radio" name="gender"><i class="form-icon"></i> Female
</label>
</div>
<div class="form-group">
<label class="form-checkbox form-inline">
<input type="checkbox"><i class="form-icon"></i> Checkbox 1
</label>
<label class="form-checkbox form-inline">
<input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
</label>
</div>
</form>
</div>
</div>
<p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 1
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 2
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4>
<p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container.
And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.
</p>
<div class="docs-demo columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-4">Name</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" id="input-example-4" type="text" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-5">Email</label>
</div>
<div class="col-9 col-sm-12">
<input class="form-input" id="input-example-5" type="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Gender</label>
</div>
<div class="col-9 col-sm-12">
<label class="form-radio">
<input type="radio" name="gender"><i class="form-icon"></i> Male
</label>
<label class="form-radio">
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
</label>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label">Source</label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" multiple="">
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-9 col-sm-12 col-ml-auto">
<label class="form-switch">
<input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
</label>
</div>
</div>
<div class="form-group">
<div class="col-3 col-sm-12">
<label class="form-label" for="input-example-6">Message</label>
</div>
<div class="col-9 col-sm-12">
<textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-9 col-sm-12 col-ml-auto">
<label class="form-checkbox">
<input type="checkbox"><i class="form-icon"></i> Remember me
</label>
</div>
</div>
</form>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-9 col-sm-12"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-comment"><!-- form structure --></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-sizes">Form sizes<a class="anchor" href="#forms-sizes" aria-hidden="true">#</a></h4>
<p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
<div class="docs-demo columns">
<div class="column col-4 col-xs-12">
<label class="form-label label-sm">Label</label>
</div>
<div class="column col-4 col-xs-12">
<input class="form-input input-sm" type="text" placeholder="Name">
</div>
<div class="column col-4 col-xs-12">
<select class="form-select select-sm">
<option>Choose an option</option>
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
<div class="column col-4 col-xs-12">
<label class="form-label label-lg">Label</label>
</div>
<div class="column col-4 col-xs-12">
<input class="form-input input-lg" type="text" placeholder="Name">
</div>
<div class="column col-4 col-xs-12">
<select class="form-select select-lg">
<option>Choose an option</option>
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
<p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
<h4 class="s-subtitle" id="forms-icons">Form icons<a class="anchor" href="#forms-icons" aria-hidden="true">#</a></h4>
<p>Spectre Forms components has <a href="icons.html">Spectre Icons</a> support.</p>
<p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element.
And add the icon with <code>form-icon</code> class next to the <input>.
</p>
<div class="docs-demo columns">
<div class="column col-4 col-xs-12">
<div class="has-icon-left">
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
<input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-left">
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with Spectre icon --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<p>You can use the <code>loading</code> class for loading or posting state.</p>
<div class="docs-demo columns">
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i>
</div>
</div>
<div class="column col-4 col-xs-12">
<div class="has-icon-right">
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i>
</div>
</div>
</div>
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with loading icon --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
<h4 class="s-subtitle" id="forms-input">Input types<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-8">Email</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-9">URL</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-10">Search</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-10" type="search" placeholder="Search">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-11">Tel</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-12">Password</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-13">Number</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-13" type="number" placeholder="00" value="66">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-14">Date</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-14" type="date" value="2016-12-31">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-15">Color</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-15" type="color" value="#5755d9">
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label" for="input-example-16">File</label>
</div>
<div class="col-9">
<input class="form-input" id="input-example-16" type="file">
</div>
</div>
</form>
</div>
</div>
<h4 class="s-subtitle" id="forms-input-groups">Input groups<a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a></h4>
<div class="docs-demo columns">
<div class="column col-6 col-xs-12">
<div class="input-group">
<input class="form-input input-sm" type="text" placeholder="username">
<select class="form-select select-sm">
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
<input class="form-input input-sm" type="text" placeholder="site name">
<button class="btn btn-primary input-group-btn btn-sm">Submit</button>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group">
<input class="form-input" type="text" placeholder="username">
<select class="form-select">
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group"><span class="input-group-addon">slack.com/</span>
<input class="form-input" type="text" placeholder="site name">
<button class="btn btn-primary input-group-btn">Submit</button>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group">
<label class="form-switch">
<input type="checkbox"><i class="form-icon"></i>
</label>
<input class="form-input" type="text" placeholder="name">
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group">
<label class="form-checkbox">
<input type="checkbox"><i class="form-icon"></i>
</label>
<input class="form-input" type="text" placeholder="name">
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group">
<input class="form-input input-lg" type="text" placeholder="username">
<select class="form-select select-lg">
<option>Slack</option>
<option>Skype</option>
<option>Hipchat</option>
</select>
</div>
</div>
<div class="column col-6 col-xs-12">
<div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
<input class="form-input input-lg" type="text" placeholder="site name">
<button class="btn btn-primary input-group-btn btn-lg">Submit</button>
</div>
</div>
</div>
<p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container.
And add the <code>input-group-addon</cod