js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
c4161b72511e64957b1c249b503df74bf2e76492
webawesome/docs/forms.html
Martijn van der Ven c4161b7251 Switch RawGit to unpkg (#85) 
* Switch RawGit to unpkg

* Switch RawGit to unpkg in docs

* Switch RawGit to unpkg in layout
2019-08-05 09:53:37 -04:00

690 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Default form control styles.">
<link rel="icon" href="../source/img/favicon.png">
<link rel="stylesheet" href="../dist/shoelace.css">
<link rel="stylesheet" href="../source/css/_docs.css">
<link rel="stylesheet" href="https://unpkg.com/prism-theme-one-dark@1.0.0/prism-onedark.css" integrity="sha384-WBhzd+87GQqNnqPLNAn5C7FAa8F/UuNpjW2vcLo8iVyvvT3LxuGZh6xoQYPTq0Tw" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Forms</title>
</head>
<body>
<a href="#content" class="skip">Skip to content</a>
<header id="head" class="text-center">
<h1>
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
</h1>
<p class="text-secondary text-small">
A back to the basics CSS starter kit. For when you don’t need the whole boot.
</p>
</header>
<main class="container">
<div class="row">
<nav class="col-md-3">
<ul id="nav">
<li><a href="installing.html">Installing</a></li>
<li><a href="customizing.html">Customizing</a></li>
<li><a href="content.html">Content</a></li>
<li><a href="alerts.html">Alerts</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="dropdowns.html">Dropdowns</a></li>
<li><a href="file-buttons.html">File Buttons</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="grid-system.html">Grid System</a></li>
<li><a href="loaders.html">Loaders</a></li>
<li><a href="progress-bars.html">Progress Bars</a></li>
<li><a href="switches.html">Switches</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="tables.html">Tables</a></li>
<li><a href="utilities.html">Utilities</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="browser-support.html">Browser Support</a></li>
<li><a href="attribution.html">Attribution</a></li>
</ul>
</nav>
<div class="col-md-9">
<div id="content">
<h2 id="forms">Forms</h2>
<p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
<h3 id="form-controls">Form Controls</h3>
<p>Form controls are styled at 100% of the width of their parent element.</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Input Type</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;input type=&quot;checkbox&quot;&gt;</code></td>
<td>
<label><input type="checkbox" checked> Checkbox 1</label><br>
<label><input type="checkbox"> Checkbox 2</label>
</td>
</tr>
<tr>
<td><code>&lt;input type=&quot;color&quot;&gt;</code></td>
<td><input type="color" value="#0099dd"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;date&quot;&gt;</code></td>
<td><input type="date"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;email&quot;&gt;</code></td>
<td><input type="email"></td>
</tr>
<tr>
<td>
<code>&lt;input type=&quot;file&quot;&gt;</code>
<br>
<span class="text-small text-secondary">
File inputs aren’t supported. Use a <a href="file-buttons.html">file button</a> instead.
</span>
</td>
<td>
<span class="file-button">
<input type="file" id="file-button-ex">
<label class="button button-block" for="file-button-ex">Select File</label>
</span>
</td>
</tr>
<tr>
<td><code>&lt;input type=&quot;number&quot;&gt;</code></td>
<td><input type="number"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;password&quot;&gt;</code></td>
<td><input type="password"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;radio&quot;&gt;</code></td>
<td>
<label><input type="Radio" name="radio" checked> Radio 1</label><br>
<label><input type="Radio" name="radio"> Radio 2</label>
</td>
</tr>
<tr>
<td><code>&lt;input type=&quot;range&quot;&gt;</code></td>
<td><input type="range"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;search&quot;&gt;</code></td>
<td><input type="search"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;text&quot;&gt;</code></td>
<td><input type="text"></td>
</tr>
<tr>
<td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
<td><input type="time"></td>
</tr>
<tr>
<td><code>&lt;select&gt;</code></td>
<td>
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</td>
</tr>
<tr>
<td><code>&lt;textarea&gt;</code></td>
<td><textarea rows="4"></textarea></td>
</tr>
</tbody>
</table>
<p>You can change the size of most form controls with the <code>input-[xs|sm|lg|xl]</code> modifiers.</p>
<pre><code class="lang-html">&lt;input type=&quot;text&quot; class=&quot;input-xs&quot; placeholder=&quot;XS&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;input-sm&quot; placeholder=&quot;SM&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Default&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;input-lg&quot; placeholder=&quot;LG&quot;&gt;
&lt;input type=&quot;text&quot; class=&quot;input-xl&quot; placeholder=&quot;XL&quot;&gt;
&lt;select class=&quot;input-xs&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
&lt;select class=&quot;input-sm&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
&lt;select&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
&lt;select class=&quot;input-lg&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
&lt;select class=&quot;input-xl&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
</code></pre>
<div class="row">
<div class="col-sm-6">
<div class="input-field">
<input type="text" class="input-xs" placeholder="XS">
</div>
<div class="input-field">
<input type="text" class="input-sm" placeholder="SM">
</div>
<div class="input-field">
<input type="text" placeholder="Default">
</div>
<div class="input-field">
<input type="text" class="input-lg" placeholder="LG">
</div>
<div class="input-field">
<input type="text" class="input-xl" placeholder="XL">
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<select class="input-xs"><option>XS</option></select>
</div>
<div class="input-field">
<select class="input-sm"><option>SM</option></select>
</div>
<div class="input-field">
<select><option>Default</option></select>
</div>
<div class="input-field">
<select class="input-lg"><option>LG</option></select>
</div>
<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-field">
<input type="text" placeholder="Input" disabled>
</div>
<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-field">
<input type="text" readonly value="This is read-only">
</div>
<h3 id="input-fields">Input Fields</h3>
<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-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-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-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-field">
<label><input type="checkbox"> Remember me</label>
</div>
<h3 id="input-groups">Input Groups</h3>
<p>Form controls and buttons can be grouped by wrapping them in <code>input-group</code> containers.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;First&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Middle&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Last&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 1&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 2&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 3&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<div class="input-group">
<input type="text">
<button type="button">Submit</button>
</div>
<div class="input-group">
<button type="button">Submit</button>
<input type="text">
</div>
<div class="input-group">
<input type="text" placeholder="First">
<input type="text" placeholder="Middle">
<input type="text" placeholder="Last">
<button type="button">Submit</button>
</div>
<div class="input-group">
<button type="button">Option 1</button>
<button type="button">Option 2</button>
<button type="button">Option 3</button>
</div>
<h3 id="input-hints">Input Hints</h3>
<p>You can add textual hints below form controls with the <code>input-hint</code> class.</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;p class=&quot;input-hint&quot;&gt;What do people call you?&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;input-field&quot;&gt;
&lt;label&gt;Age&lt;/label&gt;
&lt;input type=&quot;number&quot;&gt;
&lt;p class=&quot;input-hint&quot;&gt;Enter your age in years&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<div class="row">
<div class="col-sm-6">
<div class="input-field">
<label>Name</label>
<input type="text">
<p class="input-hint">What do people call you?</p>
</div>
</div>
<div class="col-sm-6">
<div class="input-field">
<label>Age</label>
<input type="number">
<p class="input-hint">Enter your age in years</p>
</div>
</div>
</div>
<h3 id="input-addons">Input Addons</h3>
<p>To create an input addon, use <code>&lt;span class=&quot;input-addon&quot;&gt;</code>. Addons can appear anywhere inside an input group. Use the <code>input-addon-[xs|sm|lg|xl]</code> modifiers to change the size to match adjacent form controls.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon input-addon-xs&quot;&gt;$&lt;/span&gt;
&lt;input type=&quot;text&quot; class=&quot;input-xs&quot;&gt;
&lt;span class=&quot;input-addon input-addon-xs&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon input-addon-sm&quot;&gt;$&lt;/span&gt;
&lt;input type=&quot;text&quot; class=&quot;input-sm&quot;&gt;
&lt;span class=&quot;input-addon input-addon-sm&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon&quot;&gt;$&lt;/span&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;span class=&quot;input-addon&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon input-addon-lg&quot;&gt;$&lt;/span&gt;
&lt;input type=&quot;text&quot; class=&quot;input-lg&quot;&gt;
&lt;span class=&quot;input-addon input-addon-lg&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon input-addon-xl&quot;&gt;$&lt;/span&gt;
&lt;input type=&quot;text&quot; class=&quot;input-xl&quot;&gt;
&lt;span class=&quot;input-addon input-addon-xl&quot;&gt;.00&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xs">$</span>
<input type="text" class="input-xs">
<span class="input-addon input-addon-xs">.00</span>
</div>
</div>
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-sm">$</span>
<input type="text" class="input-sm">
<span class="input-addon input-addon-sm">.00</span>
</div>
</div>
<div class="input-field">
<div class="input-group">
<span class="input-addon">$</span>
<input type="text">
<span class="input-addon">.00</span>
</div>
</div>
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-lg">$</span>
<input type="text" class="input-lg">
<span class="input-addon input-addon-lg">.00</span>
</div>
</div>
<div class="input-field">
<div class="input-group">
<span class="input-addon input-addon-xl">$</span>
<input type="text" class="input-xl">
<span class="input-addon input-addon-xl">.00</span>
</div>
</div>
<h3 id="input-icons">Input Icons</h3>
<p>Input icons add visual context to form controls. To add icons to a form control, wrap it with an <code>input-icon</code> element and add icons before and after it.</p>
<p>This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-phone&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-envelope-o&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
&lt;select&gt;&lt;option&gt;United States&lt;/option&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
<div class="row">
<div class="col-md-6 mar-b-md">
<div class="input-icon">
<i class="fa fa-fw fa-phone"></i>
<input type="text">
</div>
</div>
<div class="col-md-6 mar-b-md">
<div class="input-icon">
<input type="text">
<i class="fa fa-fw fa-envelope-o"></i>
</div>
</div>
<div class="col-md-6 mar-b-md">
<div class="input-icon">
<i class="fa fa-fw fa-user"></i>
<input type="text">
<i class="fa fa-check"></i>
</div>
</div>
<div class="col-md-6 mar-b-md">
<div class="input-icon">
<i class="fa fa-fw fa-map-marker"></i>
<select><option>United States</option></select>
</div>
</div>
</div>
<p>Input icons can be used inside form groups.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-addon&quot;&gt;Location&lt;/span&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;button type=&quot;button&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<div class="input-group">
<span class="input-addon">Location</span>
<div class="input-icon">
<i class="fa fa-fw fa-map-marker"></i>
<input type="text">
<i class="fa fa-fw fa-check"></i>
</div>
<button type="button">Submit</button>
</div>
<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons to match form controls.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-icon input-icon-xs&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input class=&quot;input-xs&quot; type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon input-icon-sm&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input class=&quot;input-sm&quot; type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon input-icon-lg&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input class=&quot;input-lg&quot; type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class=&quot;input-icon input-icon-xl&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input class=&quot;input-xl&quot; type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>
<div class="input-field">
<div class="input-icon input-icon-xs">
<i class="fa fa-fw fa-user"></i>
<input class="input-xs" type="text">
<i class="fa fa-check"></i>
</div>
</div>
<div class="input-field">
<div class="input-icon input-icon-sm">
<i class="fa fa-fw fa-user"></i>
<input class="input-sm" type="text">
<i class="fa fa-check"></i>
</div>
</div>
<div class="input-field">
<div class="input-icon">
<i class="fa fa-fw fa-user"></i>
<input type="text">
<i class="fa fa-check"></i>
</div>
</div>
<div class="input-field">
<div class="input-icon input-icon-lg">
<i class="fa fa-fw fa-user"></i>
<input class="input-lg" type="text">
<i class="fa fa-check"></i>
</div>
</div>
<div class="input-field">
<div class="input-icon input-icon-xl">
<i class="fa fa-fw fa-user"></i>
<input class="input-xl" type="text">
<i class="fa fa-check"></i>
</div>
</div>
<h3 id="form-groups">Form Groups</h3>
<p>Related form controls can be grouped in a <code>&lt;fieldset&gt;</code>. An optional <code>&lt;legend&gt;</code> can be used to display a name for the group.</p>
<pre><code class="lang-html">&lt;fieldset&gt;
&lt;legend&gt;User&lt;/legend&gt;
...
&lt;/fieldset&gt;
</code></pre>
<fieldset>
<legend>Login</legend>
<div class="input-field">
<label>Username</label>
<input type="text">
</div>
<div class="input-field">
<label>Password</label>
<input type="password">
</div>
<div class="input-field">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="input-field">
<button type="button">Login</button>
</div>
</fieldset>
<h3 id="validation">Validation</h3>
<p>A form control can be made valid or invalid by adding the <code>input-valid</code> or <code>input-invalid</code> modifiers to the surrounding <code>input-field</code>.</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-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="row">
<div class="col-12 col-sm-6">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>
</div>
</div>
<p>Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.</p>
<pre><code class="lang-html">&lt;div class=&quot;input-field input-valid&quot;&gt;
&lt;label&gt;Valid with Icons&lt;/label&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;input-field input-invalid&quot;&gt;
&lt;label&gt;Invalid with Icons&lt;/label&gt;
&lt;div class=&quot;input-icon&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
&lt;input type=&quot;text&quot;&gt;
&lt;i class=&quot;fa fa-fw fa-times&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="row">
<div class="col-12 col-sm-6">
<div class="input-field input-valid">
<label>Valid with Icons</label>
<div class="input-icon">
<i class="fa fa-fw fa-user"></i>
<input type="text">
<i class="fa fa-fw fa-check"></i>
</div>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="input-field input-invalid">
<label>Invalid with Icons</label>
<div class="input-icon">
<i class="fa fa-fw fa-user"></i>
<input type="text">
<i class="fa fa-fw fa-times"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="foot" role="contentinfo">
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
<p class="text-small text-secondary">
1.0.0-beta24
</p>
<p class="mar-y-sm text-center">
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
</p>
<p>
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
</p>
<p class="text-small text-secondary">
<a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
&copy; A Beautiful Site, LLC
</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script src="../dist/shoelace.js"></script>
<script>
$(function() {
// Highlight current nav item
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
}
});
// Intercept dropdown clicks for the demo
$('.dropdown').on('select', function(event) {
event.preventDefault();
});
});
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink