2017-08-08 17:41:40 -04:00
<!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" >
2017-08-09 11:22:09 -04:00
< link rel = "stylesheet" href = "../dist/shoelace.css" >
2017-08-08 17:41:40 -04:00
< link rel = "stylesheet" href = "../source/css/_docs.css" >
2019-08-05 15:53:37 +02:00
< link rel = "stylesheet" href = "https://unpkg.com/prism-theme-one-dark@1.0.0/prism-onedark.css" integrity = "sha384-WBhzd+87GQqNnqPLNAn5C7FAa8F/UuNpjW2vcLo8iVyvvT3LxuGZh6xoQYPTq0Tw" crossorigin = "anonymous" >
2017-08-27 13:07:44 -04:00
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >
2017-08-08 17:41:40 -04:00
< title > Forms< / title >
< / head >
< body >
2017-12-11 10:43:09 -05:00
< a href = "#content" class = "skip" > Skip to content< / a >
2017-08-08 17:41:40 -04:00
< header id = "head" class = "text-center" >
< h1 >
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
< / h1 >
2017-08-29 17:54:27 -04:00
2017-08-13 15:41:38 -04:00
< p class = "text-secondary text-small" >
2017-08-08 17:41:40 -04:00
A back to the basics CSS starter kit. For when you don’
< / p >
< / header >
2017-08-26 10:04:07 -04:00
< main class = "container" >
< div class = "row" >
2017-12-11 10:43:09 -05:00
< nav class = "col-md-3" >
2017-08-26 10:04:07 -04:00
< 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 >
2017-08-30 11:58:46 -04:00
< li > < a href = "file-buttons.html" > File Buttons< / a > < / li >
2017-08-26 10:04:07 -04:00
< 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 >
2017-12-11 10:43:09 -05:00
< / nav >
2017-08-26 10:04:07 -04:00
< div class = "col-md-9" >
< div id = "content" >
< h2 id = "forms" > Forms< / h2 >
2017-08-08 17:41:40 -04:00
< p > Shoelace gives you beautiful forms without hassle. Most form controls don’ < / 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 > < input type=" checkbox" > < / code > < / td >
< td >
< label > < input type = "checkbox" checked > Checkbox 1< / label > < br >
< label > < input type = "checkbox" > Checkbox 2< / label >
< / td >
< / tr >
< tr >
< td > < code > < input type=" color" > < / code > < / td >
< td > < input type = "color" value = "#0099dd" > < / td >
< / tr >
< tr >
< td > < code > < input type=" date" > < / code > < / td >
< td > < input type = "date" > < / td >
< / tr >
< tr >
< td > < code > < input type=" email" > < / code > < / td >
< td > < input type = "email" > < / td >
< / tr >
< tr >
< td >
< code > < input type=" file" > < / code >
< br >
2017-08-13 15:41:38 -04:00
< span class = "text-small text-secondary" >
2017-08-30 11:58:46 -04:00
File inputs aren’ < a href = "file-buttons.html" > file button< / a > instead.
2017-08-08 17:41:40 -04:00
< / span >
< / td >
< td >
2017-08-30 11:58:46 -04:00
< span class = "file-button" >
< input type = "file" id = "file-button-ex" >
< label class = "button button-block" for = "file-button-ex" > Select File< / label >
< / span >
2017-08-08 17:41:40 -04:00
< / td >
< / tr >
< tr >
< td > < code > < input type=" number" > < / code > < / td >
< td > < input type = "number" > < / td >
< / tr >
< tr >
< td > < code > < input type=" password" > < / code > < / td >
< td > < input type = "password" > < / td >
< / tr >
< tr >
< td > < code > < input type=" radio" > < / 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 > < input type=" range" > < / code > < / td >
< td > < input type = "range" > < / td >
< / tr >
< tr >
< td > < code > < input type=" search" > < / code > < / td >
< td > < input type = "search" > < / td >
< / tr >
< tr >
< td > < code > < input type=" text" > < / code > < / td >
< td > < input type = "text" > < / td >
< / tr >
< tr >
< td > < code > < input type=" time" > < / code > < / td >
< td > < input type = "time" > < / td >
< / tr >
< tr >
< td > < code > < select> < / code > < / td >
< td >
< select >
< option > Item 1< / option >
< option > Item 2< / option >
< option > Item 3< / option >
< / select >
< / td >
< / tr >
< tr >
< td > < code > < textarea> < / code > < / td >
< td > < textarea rows = "4" > < / textarea > < / td >
< / tr >
< / tbody >
< / table >
2017-08-17 14:13:56 -04:00
< 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" > < input type=" text" class=" input-xs" placeholder=" XS" >
< input type=" text" class=" input-sm" placeholder=" SM" >
2017-08-08 17:41:40 -04:00
< input type=" text" placeholder=" Default" >
2017-08-17 14:13:56 -04:00
< input type=" text" class=" input-lg" placeholder=" LG" >
< input type=" text" class=" input-xl" placeholder=" XL" >
2017-08-08 17:41:40 -04:00
2017-08-17 14:13:56 -04:00
< select class=" input-xs" > < option> Item< /option> < /select>
< select class=" input-sm" > < option> Item< /option> < /select>
2017-08-08 17:41:40 -04:00
< select> < option> Item< /option> < /select>
2017-08-17 14:13:56 -04:00
< select class=" input-lg" > < option> Item< /option> < /select>
< select class=" input-xl" > < option> Item< /option> < /select>
2017-08-08 17:41:40 -04:00
< / code > < / pre >
2017-08-26 10:04:07 -04:00
< div class = "row" >
< div class = "col-sm-6" >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< input type = "text" class = "input-xs" placeholder = "XS" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< input type = "text" class = "input-sm" placeholder = "SM" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< input type = "text" placeholder = "Default" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< input type = "text" class = "input-lg" placeholder = "LG" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< input type = "text" class = "input-xl" placeholder = "XL" >
< / div >
< / div >
2017-08-26 10:04:07 -04:00
< div class = "col-sm-6" >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< select class = "input-xs" > < option > XS< / option > < / select >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< select class = "input-sm" > < option > SM< / option > < / select >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< select > < option > Default< / option > < / select >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< select class = "input-lg" > < option > LG< / option > < / select >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< select class = "input-xl" > < option > XL< / option > < / select >
< / div >
< / div >
2017-08-08 17:41:40 -04:00
< / div >
< p > Disabled form controls look like this:< / p >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< input type = "text" placeholder = "Input" disabled >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label > < input type = "checkbox" disabled > Checkbox< / label >
< label > < input type = "radio" disabled > Radio< / label >
< / div >
< p > Read-only form controls look like this:< / p >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< input type = "text" readonly value = "This is read-only" >
< / div >
2017-08-27 14:23:09 -04:00
< h3 id = "input-fields" > Input Fields< / h3 >
2017-08-23 09:59:22 -04:00
< p > For proper spacing of individual form controls, wrap them in < code > input-field< / code > containers.< / p >
< pre > < code class = "lang-html" > < div class=" input-field" >
2017-08-08 17:41:40 -04:00
< label> Name< /label>
< input type=" text" >
< /div>
2017-08-23 09:59:22 -04:00
< div class=" input-field" >
2017-08-08 17:41:40 -04:00
< label> Password< /label>
< input type=" password" >
< /div>
2017-08-23 09:59:22 -04:00
< div class=" input-field" >
2017-08-08 17:41:40 -04:00
< label> < input type=" checkbox" > Remember me< /label>
< /div>
< / code > < / pre >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label > Username< / label >
< input type = "text" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label > Password< / label >
< input type = "password" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< 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" > < div class=" input-group" >
< input type=" text" >
< button type=" button" class=" button" > Submit< /button>
< /div>
< div class=" input-group" >
< button type=" button" class=" 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" class=" button" > Submit< /button>
< /div>
< div class=" input-group" >
< button type=" button" class=" button" > Option 1< /button>
< button type=" button" class=" button" > Option 2< /button>
< button type=" button" class=" button" > Option 3< /button>
< /div>
< / code > < / pre >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< input type = "text" >
< button type = "button" > Submit< / button >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< button type = "button" > Submit< / button >
< input type = "text" >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< input type = "text" placeholder = "First" >
< input type = "text" placeholder = "Middle" >
< input type = "text" placeholder = "Last" >
< button type = "button" > Submit< / button >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-13 15:41:38 -04:00
< div class = "input-group" >
< button type = "button" > Option 1< / button >
< button type = "button" > Option 2< / button >
< button type = "button" > Option 3< / button >
2017-08-08 17:41:40 -04:00
< / div >
2017-09-26 12:03:57 -04:00
< 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" > < div class=" input-field" >
< label> Name< /label>
< input type=" text" >
< p class=" input-hint" > What do people call you?< /p>
< /div>
< div class=" input-field" >
< label> Age< /label>
< input type=" number" >
< p class=" input-hint" > Enter your age in years< /p>
< /div>
< / 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 >
2017-08-08 17:41:40 -04:00
< h3 id = "input-addons" > Input Addons< / h3 >
2017-08-17 14:13:56 -04:00
< p > To create an input addon, use < code > < span class=" input-addon" > < / 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 >
2017-08-08 17:41:40 -04:00
< pre > < code class = "lang-html" > < div class=" input-group" >
2017-08-17 14:13:56 -04:00
< 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 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>
2017-08-08 17:41:40 -04:00
< /div>
< div class=" input-group" >
< span class=" input-addon" > $< /span>
< input type=" text" >
< span class=" input-addon" > .00< /span>
< /div>
< div class=" input-group" >
2017-08-17 14:13:56 -04:00
< 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 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>
2017-08-08 17:41:40 -04:00
< /div>
< / code > < / pre >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< div class = "input-group" >
2017-08-17 14:13:56 -04:00
< 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 >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< 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 >
2017-08-08 17:41:40 -04:00
< / div >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< div class = "input-group" >
< span class = "input-addon" > $< / span >
< input type = "text" >
< span class = "input-addon" > .00< / span >
< / div >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< div class = "input-group" >
2017-08-17 14:13:56 -04:00
< 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 >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-17 14:13:56 -04:00
< 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 >
2017-08-08 17:41:40 -04:00
< / div >
< / div >
2017-08-27 13:07:44 -04:00
< 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" > < div class=" input-icon" >
< i class=" fa fa-fw fa-phone" > < /i>
< input type=" text" >
< /div>
< div class=" input-icon" >
< input type=" text" >
< i class=" fa fa-fw fa-envelope-o" > < /i>
< /div>
< div class=" input-icon" >
< i class=" fa fa-fw fa-user" > < /i>
< input type=" text" >
< i class=" fa fa-check" > < /i>
< /div>
< div class=" input-icon" >
< i class=" fa fa-fw fa-map-marker" > < /i>
2017-08-27 13:39:14 -04:00
< select> < option> United States< /option> < /select>
2017-08-27 13:07:44 -04:00
< /div>
< / 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 >
2017-08-27 13:39:14 -04:00
< select > < option > United States< / option > < / select >
2017-08-27 13:07:44 -04:00
< / div >
< / div >
< / div >
2017-08-29 22:05:15 -04:00
< p > Input icons can be used inside form groups.< / p >
< pre > < code class = "lang-html" > < 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>
< / 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 >
2017-08-27 13:07:44 -04:00
< pre > < code class = "lang-html" > < 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 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 class=" input-icon" >
< i class=" fa fa-fw fa-user" > < /i>
< input type=" text" >
< i class=" fa fa-check" > < /i>
< /div>
< 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 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>
< / 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 >
2017-08-08 17:41:40 -04:00
< h3 id = "form-groups" > Form Groups< / h3 >
< p > Related form controls can be grouped in a < code > < fieldset> < / code > . An optional < code > < legend> < / code > can be used to display a name for the group.< / p >
< pre > < code class = "lang-html" > < fieldset>
< legend> User< /legend>
...
< /fieldset>
< / code > < / pre >
< fieldset >
< legend > Login< / legend >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label > Username< / label >
< input type = "text" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label > Password< / label >
< input type = "password" >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< label >
< input type = "checkbox" > Remember me
< / label >
< / div >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< button type = "button" > Login< / button >
< / div >
< / fieldset >
< h3 id = "validation" > Validation< / h3 >
2017-08-27 14:23:00 -04:00
< 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 >
2017-08-23 09:59:22 -04:00
< pre > < code class = "lang-html" > < div class=" input-field input-valid" >
2017-08-08 17:41:40 -04:00
< label> Valid< /label>
< input type=" text" >
< /div>
2017-08-23 09:59:22 -04:00
< div class=" input-field input-invalid" >
2017-08-08 17:41:40 -04:00
< label> Invalid< /label>
< input type=" text" >
< /div>
< / code > < / pre >
2017-08-26 10:04:07 -04:00
< div class = "row" >
2017-08-27 14:23:00 -04:00
< div class = "col-12 col-sm-6" >
2017-08-23 09:59:22 -04:00
< div class = "input-field input-valid" >
2017-08-17 14:13:56 -04:00
< label > Valid< / label >
< input type = "text" >
< / div >
2017-08-08 17:41:40 -04:00
< / div >
2017-08-27 14:23:00 -04:00
< div class = "col-12 col-sm-6" >
2017-08-23 09:59:22 -04:00
< div class = "input-field input-invalid" >
2017-08-27 14:23:00 -04:00
< 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’ < / p >
< pre > < code class = "lang-html" > < 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 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>
< / 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 >
2017-08-08 17:41:40 -04:00
< / div >
< / div >
2017-08-26 10:04:07 -04:00
< / div >
< / div >
2017-08-08 17:41:40 -04:00
< / main >
2017-12-11 10:43:09 -05:00
< footer id = "foot" role = "contentinfo" >
2017-08-08 17:41:40 -04:00
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
2017-08-18 14:57:46 -04:00
2017-08-13 15:41:38 -04:00
< p class = "text-small text-secondary" >
2017-10-10 20:58:00 -04:00
1.0.0-beta24
2017-08-08 17:41:40 -04:00
< / p >
2017-08-16 21:34:27 -04:00
< p class = "mar-y-sm text-center" >
2017-08-08 17:41:40 -04:00
< 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 >
2017-08-18 14:57:46 -04:00
2017-08-08 17:41:40 -04:00
< p >
2017-08-13 15:57:30 -04:00
< 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 >
2017-08-08 17:41:40 -04:00
< / p >
2017-08-18 14:57:46 -04:00
< p class = "text-small text-secondary" >
< a href = "https://keycdn.com/" class = "text-secondary" > Accelerated by KeyCDN< / a > ·
© A Beautiful Site, LLC
< / p >
2017-08-08 17:41:40 -04:00
< / 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 >
2017-08-09 11:22:09 -04:00
< script src = "../dist/shoelace.js" > < / script >
2017-08-08 17:41:40 -04:00
< script >
$(function() {
// Highlight current nav item
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
}
});
2017-09-01 23:59:53 -04:00
// Intercept dropdown clicks for the demo
$('.dropdown').on('select', function(event) {
event.preventDefault();
});
2017-08-08 17:41:40 -04:00
});
< / script >
< script async defer src = "https://buttons.github.io/buttons.js" > < / script >
< / body >
< / html >
