causeway-standard-theme
Version:
4,069 lines • 155 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="forms"></a>
<header class="content-header">
<h1 class="title">
Forms
</h1>
<ul class="nav nav-pills">
<li>
<a href="/docs/forms.html#forms-text">
Text
</a>
</li>
<li>
<a href="/docs/forms.html#forms-textarea">
Textarea
</a>
</li>
<li>
<a href="/docs/forms.html#forms-password">
Password
</a>
</li>
<li class="dropdown">
<a href="/docs/select.html#forms-select" data-hover="dropdown">
Select
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/select.html#forms-select-single">
Single Choice
</a>
</li>
<li>
<a href="/docs/select.html#forms-select-multiple">
Multiple Choice
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/forms.html#forms-file">
File
</a>
</li>
<li class="dropdown">
<a href="/docs/date.html#forms-date" data-hover="dropdown">
Date
<span class="fa fa-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="/docs/date.html#forms-date-single">
Single Date
</a>
</li>
<li>
<a href="/docs/date.html#forms-date-range">
Date Range
</a>
</li>
</ul>
</li>
<li>
<a href="/docs/forms.html#forms-email">
Email
</a>
</li>
<li>
<a href="/docs/forms.html#forms-hyperlink">
Hyperlink
</a>
</li>
<li>
<a href="/docs/forms.html#forms-telephone">
Telephone
</a>
</li>
<li>
<a href="/docs/forms.html#forms-checkbox">
Checkbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-tristate">
Tristate
</a>
</li>
<li>
<a href="/docs/forms.html#forms-radio">
Radiobutton
</a>
</li>
<li>
<a href="/docs/forms.html#forms-time">
Time
</a>
</li>
<li>
<a href="/docs/forms.html#forms-color">
Color
</a>
</li>
<li>
<a href="/docs/forms.html#forms-currency">
Currency
</a>
</li>
<li>
<a href="/docs/forms.html#forms-image">
Image
</a>
</li>
<li>
<a href="/docs/forms.html#spinbox">
Spinbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-advanced-listbox">
Advanced Listbox
</a>
</li>
<li>
<a href="/docs/forms.html#forms-select-shuttle">
Select Shuttle
</a>
</li>
</ul>
</header>
<p>
Forms comprise of a surround and controlled by optional attribute. The attribute appears in the opening <code><form></code> tag. The form tags should surround any content containing form controls but should not contain any child <code><form></code> tags. A single row on a form should be contained by a div with a class of <code>"form-group"</code> as shown in the example below.
</p>
<pre><code>
<form role="form">
<div class="form-group">
<label for="inputField1"></label>
<input type="text" class="form-control" id="inputField1"/>
</div>
</form>
</code></pre>
<br/>
<header class="content-header">
<div class="row">
<div class="col-sm-8">
<h2 class="title">
A complex form example
</h2>
</div>
<div class="col-sm-4">
<button id="condense-form" class="pull-right btn btn-default">Condense</button>
</div>
</div>
</header>
<form id="tobeCondensed">
<div class="row">
<div class="col-md-6">
<div class="form-group invalid error">
<label for="userName">User Name:</label>
<input type="text" id="userName" class="form-control" placeholder="Enter username">
<span class="error-message">Error Message</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control" placeholder="Enter Password">
</div>
</div>
</div>
<div class="form-group invalid error-hover">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control" placeholder="Enter Email Address">
<span class="error-message">Error Message</span>
</div>
<div class="form-group invalid error-hover">
<label for="email">Text Area:</label>
<textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
<span class="error-message">Error Message for textarea</span>
</div>
<div class="form-group invalid error-hover">
<label for="selectMenu">Select Menu:</label>
<div class="select">
<select id="selectMenu" class="form-control">
<option value="">All</option>
<option value=""></option>
<option value="A">Order Acknowledgement</option>
<option value="BR">Bulk Upload Response</option>
<option value="D">Dispatch Note</option>
<option value="I" selected="selected">Invoice</option>
<option value="LU">Lookup File</option>
<option value="O">Order</option>
<option value="P">PCard</option>
<option value="PR">PCard Response</option>
<option value="PT">Pass Through File</option>
<option value="Q">Query</option>
<option value="R">Requisition</option>
<option value="RM">Remittance</option>
<option value="SM">Status</option>
<option value="S">Statement</option>
</select>
<span class="error-message">Error Message for select</span>
</div>
</div>
<div class="form-group">
<label for="selectMenu2">Select Menu 2:</label>
<div class="select">
<select id="selectMenu2" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
<div class="form-group invalid error-hover">
<label>This has an error:</label>
<div class="checkbox">
<input type="checkbox" id="errorMessage">
<label for="errorMessage"><span class="checkbox-icon"></span></label>
<span class="error-message" data-original-title="" title="">Error Message for checkbox</span>
</div>
</div>
<div class="form-group">
<label>Reporting Days: </label>
<div class="checkbox-input-group">
<div class="checkbox-inline">
<input type="checkbox" id="sun">
<label for="sun"><span class="checkbox-icon"></span>Sun</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="mon">
<label for="mon"><span class="checkbox-icon"></span>Mon</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="tue">
<label for="tue"><span class="checkbox-icon"></span>Tue</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="wed">
<label for="wed"><span class="checkbox-icon"></span>Wed</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="thu">
<label for="thu"><span class="checkbox-icon"></span>Thu</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="fri">
<label for="fri"><span class="checkbox-icon"></span>Fri</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="sat">
<label for="sat"><span class="checkbox-icon"></span>Sat</label>
</div>
</div>
</div>
<div class="form-group time">
<label for="reportingInterval">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group time">
<label for="startTime">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group has-addon">
<label for="finishTime">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
<div class="form-group date">
<label for="finishDate">Date Example:</label>
<div class="input-group">
<input type="text" id="finishDate" class="form-control">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="disabled">Disabled:</label>
<input type="text" id="disabled" class="form-control" disabled="disabled"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text">
</div>
<div class="form-group">
<label for="readonly">Readonly Example:</label>
<input type="text" id="readonly" class="form-control readonly"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text"
readonly="readonly">
</div>
<div class="form-group">
<label for="readonly2">Readonly Example 2:</label>
<input type="text" id="readonly2" class="form-control readonly"
value="Readonly text fields cut off text.. need to display all text. " readonly="readonly">
</div>
<div class="form-group">
<label for="readonly3">Readonly Example 3:</label>
<textarea name="readonly3" id="readonly3" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="readonly4">Readonly Example 4:</label>
<textarea name="readonly4" id="readonly4" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="fileUpload">File Upload</label>
<div class="file-input input-group">
<input type="file" class="form-control file-input-file sr-only" id="fileUpload" name="fileUpload">
<input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove"
value="0">
<input type="text" class="form-control file-input-text" id="fileUpload-text" placeholder="Path / Filename"
value="">
<span class="input-group-addon">
<label for="fileUpload" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</span>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV">
<label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My First Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio-inline">
<input type="radio" class="form-control" id="radio1" name="firstRadio" value="">
<label for="radio1">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio2" name="firstRadio" value="">
<label for="radio2">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio3" name="firstRadio" value="">
<label for="radio3">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title="" title="">Error Message for my first radio buttons.</span>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My Second Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio">
<input type="radio" class="form-control" id="radio4" name="secondRadio" value="">
<label for="radio4">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio5" name="secondRadio" value="">
<label for="radio5">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio6" name="secondRadio" value="">
<label for="radio6">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title=""
title="">Error Message for my second radio buttons.</span>
</div>
</div>
</form>
<h2 class="title">Hover over error message code for above example</h2>
<p>Class <code>invalid</code> and <code>error-hover</code> should added to <code>.form-group</code> if there's an
error.</p>
<p>Inside <code>.control-input</code> and empty <code><span class="error-message">error message</span></code>
should be placed.</p>
<p><code><span class="error-message">error message</span></code> will remain hidden if the
parent <code>.form-group</code> doesn't have the class <code>invalid error-hover</code> which means there's no
error.</p>
<pre><code>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group invalid error">
<label for="userName">User Name:</label>
<input type="text" id="userName" class="form-control" placeholder="Enter username">
<span class="error-message">Error Message</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" class="form-control" placeholder="Enter Password">
</div>
</div>
</div>
<div class="form-group invalid error-hover">
<label for="email">Email:</label>
<input type="email" id="email" class="form-control" placeholder="Enter Email Address">
<span class="error-message">Error Message</span>
</div>
<div class="form-group invalid error-hover">
<label for="email">Text Area:</label>
<textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
<span class="error-message">Error Message for textarea</span>
</div>
<div class="form-group invalid error-hover">
<label for="selectMenu">Select Menu:</label>
<div class="select">
<select id="selectMenu" class="form-control">
<option value="">All</option>
<option value=""></option>
<option value="A">Order Acknowledgement</option>
<option value="BR">Bulk Upload Response</option>
<option value="D">Dispatch Note</option>
<option value="I" selected="selected">Invoice</option>
<option value="LU">Lookup File</option>
<option value="O">Order</option>
<option value="P">PCard</option>
<option value="PR">PCard Response</option>
<option value="PT">Pass Through File</option>
<option value="Q">Query</option>
<option value="R">Requisition</option>
<option value="RM">Remittance</option>
<option value="SM">Status</option>
<option value="S">Statement</option>
</select>
<span class="error-message">Error Message for select</span>
</div>
</div>
<div class="form-group">
<label for="selectMenu2">Select Menu 2:</label>
<div class="select">
<select id="selectMenu2" class="form-control">
<option value="send">Send</option>
<option value="recv">Receive</option>
</select>
</div>
</div>
<div class="form-group invalid error-hover">
<label>This has an error:</label>
<div class="checkbox">
<input type="checkbox" id="errorMessage">
<label for="errorMessage"><span class="checkbox-icon"></span></label>
<span class="error-message" data-original-title="" title="">Error Message for checkbox</span>
</div>
</div>
<div class="form-group">
<label>Reporting Days: </label>
<div class="checkbox-input-group">
<div class="checkbox-inline">
<input type="checkbox" id="sun">
<label for="sun"><span class="checkbox-icon"></span>Sun</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="mon">
<label for="mon"><span class="checkbox-icon"></span>Mon</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="tue">
<label for="tue"><span class="checkbox-icon"></span>Tue</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="wed">
<label for="wed"><span class="checkbox-icon"></span>Wed</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="thu">
<label for="thu"><span class="checkbox-icon"></span>Thu</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="fri">
<label for="fri"><span class="checkbox-icon"></span>Fri</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" id="sat">
<label for="sat"><span class="checkbox-icon"></span>Sat</label>
</div>
</div>
</div>
<div class="form-group time">
<label for="reportingInterval">Reporting Interval:</label>
<div class="input-group">
<input type="text" id="reportingInterval" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group time">
<label for="startTime">Start Time:</label>
<div class="input-group">
<input type="text" id="startTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
</div>
</div>
<div class="form-group has-addon">
<label for="finishTime">Add on Example:</label>
<div class="input-group">
<input type="text" id="finishTime" class="form-control">
<span class="input-group-addon"><span class="fa fa-star"></span></span>
</div>
</div>
<div class="form-group date">
<label for="finishDate">Date Example:</label>
<div class="input-group">
<input type="text" id="finishDate" class="form-control">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<label for="disabled">Disabled:</label>
<input type="text" id="disabled" class="form-control" disabled="disabled"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text">
</div>
<div class="form-group">
<label for="readonly">Readonly Example:</label>
<input type="text" id="readonly" class="form-control readonly"
value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text"
readonly="readonly">
</div>
<div class="form-group">
<label for="readonly2">Readonly Example 2:</label>
<input type="text" id="readonly2" class="form-control readonly"
value="Readonly text fields cut off text.. need to display all text. " readonly="readonly">
</div>
<div class="form-group">
<label for="readonly3">Readonly Example 3:</label>
<textarea name="readonly3" id="readonly3" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="readonly4">Readonly Example 4:</label>
<textarea name="readonly4" id="readonly4" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
</textarea>
</div>
<div class="form-group">
<label for="fileUpload">File Upload</label>
<div class="file-input input-group">
<input type="file" class="form-control file-input-file sr-only" id="fileUpload" name="fileUpload">
<input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove"
value="0">
<input type="text" class="form-control file-input-text" id="fileUpload-text" placeholder="Path / Filename"
value="">
<span class="input-group-addon">
<label for="fileUpload" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</span>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="attachCSV">
<label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My First Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio-inline">
<input type="radio" class="form-control" id="radio1" name="firstRadio" value="">
<label for="radio1">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio2" name="firstRadio" value="">
<label for="radio2">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio-inline">
<input type="radio" class="form-control" id="radio3" name="firstRadio" value="">
<label for="radio3">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title="" title="">Error Message for my first radio buttons.</span>
</div>
</div>
<div class="form-group invalid error-hover">
<label>My Second Radio Buttons:</label>
<div class="radio-input-group">
<div class="radio">
<input type="radio" class="form-control" id="radio4" name="secondRadio" value="">
<label for="radio4">
<span class="radio-icon"></span>
Option 1
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio5" name="secondRadio" value="">
<label for="radio5">
<span class="radio-icon"></span>
Option 2
</label>
</div>
<div class="radio">
<input type="radio" class="form-control" id="radio6" name="secondRadio" value="">
<label for="radio6">
<span class="radio-icon"></span>
Option 3
</label>
</div>
<span class="error-message" data-original-title=""
title="">Error Message for my second radio buttons.</span>
</div>
</div>
</form>
</code></pre>
<br/>
<div>
<a id="forms-text"></a>
<header class="content-header">
<h1 class="title">
Text
</h1>
</header>
<p>
Text controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be
added to the <code><input></code> tag, and classes should follow on from the surrounding <code>
<div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<label for="text-field1a" class="control-label">Text:</label>
<div class="control-input">
<input type="text" class="form-control" id="text-field1a" name="text_field1a" placeholder="Enter text" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group">
<label class="sr-only" for="inline-text-field1a">Text:</label>
<input type="text" class="form-control" id="inline-text-field1a" name="inline_text_field1a" placeholder="Enter text" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group disabled">
<label for="text-field1b" class="control-label">Text:</label>
<div class="control-input">
<input type="text" disabled="disabled" class="form-control" id="text-field1b" name="text_field1b" placeholder="Enter text" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group disabled">
<label class="sr-only" for="inline-text-field1b">Text:</label>
<input type="text" disabled="disabled" class="form-control" id="inline-text-field1b" name="inline_text_field1b" placeholder="Enter text" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid">
<label for="text-field1c" class="control-label">Text:</label>
<div class="control-input">
<input type="text" class="form-control" id="text-field1c" name="text_field1c" placeholder="Enter text" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-text-field1g">Text:</label>
<input type="text" class="form-control" id="inline-text-field1g" name="inline_text_field1c" placeholder="Enter text" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid Error Message
</td>
<td>
class
</td>
<td>
error
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid error">
<label for="text-field1e" class="control-label">Text:</label>
<div class="control-input">
<input type="text" class="form-control" id="text-field1e" name="text_field1c" placeholder="Enter text" value="">
<span class="error-message">Error message.</span>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-text-field1c">Text:</label>
<input type="text" class="form-control" id="inline-text-field1c" name="inline_text_field1c" placeholder="Enter text" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group readonly">
<label for="text-field1d" class="control-label">Text:</label>
<div class="control-input">
<input type="text" class="form-control" readonly="readonly" id="text-field1d" name="text_field1d" placeholder="Enter text" value="example">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group readonly">
<label class="sr-only" for="inline-text-field1d">Text:</label>
<input type="text" class="form-control" readonly="readonly" id="inline-text-field1d" name="inline_text_field1d" placeholder="Enter text" value="example">
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group">
<label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
<input type="text" class="form-control" id="<!-- Input control ID goes here -->"
name="<!-- Input control name goes here -->" placeholder="Enter text" value="<!--
Input control value goes here -->">
</div>
</code>
</pre>
<h2>Example code for error message:</h2>
<pre>
<code>
<div class="form-group invalid error">
<label for="text-field1c">Text:</label>
<input type="text" class="form-control" id="text-field1c" name="text_field1c" placeholder="Enter text" value="">
<span class="error-message">Error message.</span>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-textarea"></a>
<header class="content-header">
<h1 class="title">
Textarea
</h1>
</header>
<p>
Textarea controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code><textarea></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<label for="textarea-field1a" class="control-label">Text:</label>
<div class="control-input">
<textarea class="form-control" rows="5" id="textarea-field1a" name="textarea_field1a" placeholder="Enter text"></textarea>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group">
<label class="sr-only" for="inline-textarea-field1a">Text:</label>
<textarea class="form-control" rows="5" id="inline-textarea-field1a" name="inline_textarea_field1a" placeholder="Enter text"></textarea>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group disabled">
<label for="textarea-field1b" class="control-label">Text:</label>
<div class="control-input">
<textarea class="form-control" rows="5" disabled="disabled" id="textarea-field1b" name="textarea_field1b" placeholder="Enter text"></textarea>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group disabled">
<label class="sr-only" for="inline-textarea-field1b">Text:</label>
<textarea class="form-control" rows="5" disabled="disabled" id="inline-textarea-field1b" name="inline_textarea_field1b" placeholder="Enter text"></textarea>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid">
<label for="textarea-field1c" class="control-label">Text:</label>
<div class="control-input">
<textarea class="form-control" rows="5" id="textarea-field1c" name="textarea_field1c" placeholder="Enter text"></textarea>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-textarea-field1c">Text:</label>
<textarea class="form-control" rows="5" id="inline-textarea-field1c" name="inline_textarea_field1c" placeholder="Enter text"></textarea>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group readonly">
<label for="textarea-field1d" class="control-label">Text:</label>
<div class="control-input">
<textarea class="form-control readonly" readonly="readonly" id="textarea-field1d" name="textarea_field1d" placeholder="Enter text">example</textarea>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group readonly">
<label class="sr-only" for="inline-textarea-field1d">Text:</label>
<textarea class="form-control readonly" readonly="readonly" id="inline-textarea-field1d" name="inline_textarea_field1d" placeholder="Enter text">example</textarea>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group">
<label for="<!-- Textarea control ID goes here -->"><!-- Label text goes here -->:</label>
<textarea class="form-control" rows="5" id="<!-- Textarea control ID goes here -->" name="<!-- Textarea control name goes here -->" placeholder="Enter text">
<!-- Textarea control value goes here -->
</textarea>
</div>
</code></pre>
</div>
<br/>
<div>
<a id="forms-password"></a>
<header class="content-header">
<h1 class="title">
Password
</h1>
</header>
<p>
Password controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<label for="password-field1a" class="control-label">Password:</label>
<div class="control-input">
<input type="password" class="form-control" id="password-field1a" name="password_field1a" placeholder="Enter password" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group">
<label class="sr-only" for="inline-password-field1a">Password:</label>
<input type="password" class="form-control" id="inline-password-field1a" name="inline_password_field1a" placeholder="Enter password" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group disabled">
<label for="password-field1b" class="control-label">Password:</label>
<div class="control-input">
<input type="password" disabled="disabled" class="form-control" id="password-field1b" name="password_field1b" placeholder="Enter password" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group disabled">
<label class="sr-only" for="inline-password-field1b">Password:</label>
<input type="password" disabled="disabled" class="form-control" id="inline-password-field1b" name="inline_password_field1b" placeholder="Enter password" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid">
<label for="password-field1c" class="control-label">Password:</label>
<div class="control-input">
<input type="password" class="form-control" id="password-field1c" name="password_field1c" placeholder="Enter password" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-password-field1c">Password:</label>
<input type="password" class="form-control" id="inline-password-field1c" name="inline_password_field1c" placeholder="Enter password" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group readonly">
<label for="password-field1d" class="control-label">Password:</label>
<div class="control-input">
<input type="password" class="form-control" readonly="readonly" id="password-field1d" name="password_field1d" placeholder="Enter password" value="example">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group readonly">
<label class="sr-only" for="inline-password-field1d">Password:</label>
<input type="password" class="form-control" readonly="readonly" id="inline-password-field1d" name="inline_password_field1d" placeholder="Enter password" value="example">
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group">
<label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
<input type="password" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter password" value="">
</div>
</code>
</pre>
<p>
For security reasons the password field should never have the value attribute populated. The only potential exception would be if the control is set to be read only in which case a string containing a number of asterisks would be appropriate eg: "********".
</p>
</div>
<br/>
<div>
<a id="forms-file"></a>
<header class="content-header">
<h1 class="title">
File
</h1>
</header>
<p>
File controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the text <code><input></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group file-input">
<label for="file-field1a" class="control-label">File:</label>
<div class="control-input">
<input type="file" class="form-control file-input-file sr-only" id="file-field1a" name="file_field1a">
<input type="hidden" class="file-input-remove" id="file-field1e-remove" name="file_field1a_remove" value="0">
<input type="text" class="form-control file-input-text" id="file-field1a-text" placeholder="Path / Filename" value="">
<label for="file-field1a" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group file-input disabled">
<label for="file-field1b" class="control-label">File:</label>
<div class="control-input">
<input type="file" disabled="disabled" class="form-control file-input-file sr-only" id="file-field1b" name="file_field1b">
<input type="hidden" disabled="disabled" class="file-input-remove" id="file-field1b-remove" name="file_field1b_remove" value="0">
<input type="text" disabled="disabled" class="form-control" id="file-field1b-text" placeholder="Path / Filename" value="">
<label for="file-field1b" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group file-input invalid">
<label for="file-field1c" class="control-label">File:</label>
<div class="control-input">
<input type="file" class="form-control file-input-file sr-only" id="file-field1c" name="file_field1c">
<input type="hidden" class="file-input-remove" id="file-field1c-remove" name="file_field1c_remove" value="0">
<input type="text" class="form-control file-input-text" id="file-field1c-text" placeholder="Path / Filename" value="">
<label for="file-field1c" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group file-input readonly">
<label for="file-field1d" class="control-label">File:</label>
<div class="control-input">
<input type="file" class="form-control file-input-file sr-only" id="file-field1d" name="file_field1d" readonly="readonly">
<input type="hidden" class="file-input-remove" id="file-field1d-remove" name="file_field1d_remove" value="0">
<input type="text" class="form-control file-input-text" readonly="readonly" id="file-field1d-text" placeholder="Path / Filename" value="">
<label for="file-field1d" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</div>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-row">
<div class="form-group file-input">
<label for="file-field1a" class="control-label">File:</label>
<div class="control-input">
<input type="file" class="form-control file-input-file sr-only" id="file-field1a" name="file_field1a">
<input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove" value="0">
<input type="text" class="form-control file-input-text" id="file-field1a-text" placeholder="Path / Filename" value="">
<label for="file-field1a" class="btn btn-text btn-file btn-file-choose">Choose File</label>
<button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
</div>
</div>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-email"></a>
<header class="content-header">
<h1 class="title">
Email
</h1>
</header>
<p>
Email controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<colgroup>
<col width="10%"/>
<col width="10%"/>
<col width="15%"/>
<col width="35%"/>
<col width="30%"/>
</colgroup>
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<label for="email-field1a" class="control-label">Email:</label>
<div class="control-input">
<input type="email" class="form-control" id="email-field1a" name="email_field1a" placeholder="Enter email" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group">
<label class="sr-only" for="inline-email-field1a">Email:</label>
<input type="email" class="form-control" id="inline-email-field1a" name="inline_email_field1a" placeholder="Enter email" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group disabled">
<label for="email-field1b" class="control-label">Email:</label>
<div class="control-input">
<input type="email" disabled="disabled" class="form-control" id="email-field1b" name="email_field1b" placeholder="Enter email" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group disabled">
<label class="sr-only" for="inline-email-field1b">Email:</label>
<input type="email" disabled="disabled" class="form-control" id="inline-email-field1b" name="inline_email_field1b" placeholder="Enter email" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid">
<label for="email-field1c" class="control-label">Email:</label>
<div class="control-input">
<input type="email" class="form-control" id="email-field1c" name="email_field1c" placeholder="Enter email" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-email-field1c">Email:</label>
<input type="email" class="form-control" id="inline-email-field1c" name="inline_email_field1c" placeholder="Enter email" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group form-group-last readonly">
<label for="email-field1d" class="control-label">Email:</label>
<div class="control-input">
<input type="email" class="form-control" id="email-field1d" name="email_field1d" placeholder="Enter email" value="example@example.com" readonly>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group form-group-last readonly">
<label class="sr-only" for="inline-email-field1d">Email:</label>
<input type="email" class="form-control" id="inline-email-field1d" name="inline_email_field1d" placeholder="Enter email" value="example@example.com" readonly>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group">
<label for="<!-- Input control ID goes here -->" class="control-label"><!-- Label text goes here -->:</label>
<div class="control-input">
<input type="email" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter email" value="<!-- Input control value goes here -->">
</div>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-hyperlink"></a>
<header class="content-header">
<h1 class="title">
Hyperlink
</h1>
</header>
<p>
Hyperlink controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to both of the <code><input></code> tags, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<label for="url-field1a" class="control-label">Link:</label>
<div class="control-input">
<input type="url" class="form-control" id="url-field1a" name="url_field1a" placeholder="Enter url" value="">
</div>
<div class="form-control-spacer"></div>
<label for="url-field1a-title" class="control-label">Display Name:</label>
<div class="control-input">
<input type="text" class="form-control" id="url-field1a-title" name="url_field1a" placeholder="Enter title" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group">
<label class="sr-only" for="inline-url-field1a">Link:</label>
<input type="url" class="form-control" id="inline-url-field1a" name="inline_url_field1a" placeholder="Enter url" value="">
<div class="form-control-spacer"></div>
<label class="sr-only" for="inline-url-field1a-title">Display Name:</label>
<input type="text" class="form-control" id="inline-url-field1a-title" name="inline_url_field1a" placeholder="Enter title" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group disabled">
<label for="url-field1b" class="control-label">Link:</label>
<div class="control-input">
<input type="url" disabled="disabled" class="form-control" id="url-field1b" name="url_field1b" placeholder="Enter url" value="">
</div>
<div class="form-control-spacer"></div>
<label for="url-field1b-title" class="control-label">Display Name:</label>
<div class="control-input">
<input type="text" disabled="disabled" class="form-control" id="url-field1b-title" name="url_field1b" placeholder="Enter title" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group disabled">
<label class="sr-only" for="inline-url-field1b">Link:</label>
<input type="url" disabled="disabled" class="form-control" id="inline-url-field1b" name="inline_url_field1b" placeholder="Enter url" value="">
<div class="form-control-spacer"></div>
<label class="sr-only" for="inline-url-field1b-title">Display Name:</label>
<input type="text" disabled="disabled" class="form-control" id="inline-url-field1b-title" name="inline_url_field1b" placeholder="Enter title" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group invalid">
<label for="url-field1c" class="control-label">Link:</label>
<div class="control-input">
<input type="url" class="form-control" id="url-field1c" name="url_field1c" placeholder="Enter url" value="">
</div>
<div class="form-control-spacer"></div>
<label for="url-field1c-title" class="control-label">Display Name:</label>
<div class="control-input">
<input type="text" class="form-control" id="url-field1c-title" name="url_field1c_title" placeholder="Enter title" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group invalid">
<label class="sr-only" for="inline-url-field1c">Link:</label>
<input type="url" class="form-control" id="inline-url-field1c" name="inline_url_field1c" placeholder="Enter url" value="">
<div class="form-control-spacer"></div>
<label class="sr-only" for="inline-url-field1c-title">Display Name:</label>
<input type="text" class="form-control" id="inline-url-field1c-title" name="inline_url_field1c_title" placeholder="Enter title" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group form-group-last readonly">
<label for="url-field1d" class="control-label">Link:</label>
<div class="control-input">
<input type="url" class="form-control" id="url-field1d" name="url_field1d" placeholder="Enter url" value="http://www.example.com" readonly>
</div>
<div class="form-control-spacer"></div>
<label for="url-field1d-title" class="control-label">Display Name:</label>
<div class="control-input">
<input type="text" class="form-control" readonly="readonly" id="url-field1d-title" name="url_field1d_title" placeholder="Enter title" value="Example">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group form-group-last readonly">
<label class="sr-only" for="inline-url-field1d">Link:</label>
<input type="url" class="form-control" id="inline-url-field1d" name="inline_url_field1d" placeholder="Enter url" value="http://www.example.com" readonly>
<div class="form-control-spacer"></div>
<label class="sr-only" for="inline-url-field1d-title">Link:</label>
<input type="text" class="form-control" readonly="readonly" id="inline-url-field1d-title" name="inline_url_field1d_title" placeholder="Enter url" value="Example">
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group">
<label for="<!-- Link input control ID goes here -->" class="control-label"><!-- Link label text goes here -->:</label>
<div class="control-input">
<input type="url" class="form-control" id="<!-- Link input control ID goes here -->" name="<!-- Link input control name goes here -->" placeholder="Enter url" value="<!-- Link input control value goes here -->">
</div>
<div class="form-control-spacer"></div>
<label for="<!-- Title input control ID goes here -->" class="control-label"><!-- Title label text goes here -->:</label>
<div class="control-input">
<input type="text" class="form-control" id="<!-- Title input control ID goes here -->" name="<!-- Title input control name goes here -->" placeholder="Enter title" value="<!-- Title input control value goes here -->">
</div>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-telephone"></a>
<header class="content-header">
<h1 class="title">
Telephone
</h1>
</header>
<p>
Telephone controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to all of the <code><input></code> tags, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<colgroup>
<col width="10%"/>
<col width="10%"/>
<col width="15%"/>
<col width="35%"/>
<col width="30%"/>
</colgroup>
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group formatted-telephone">
<label for="telephone-field1a-country" class="control-label">Telephone:</label>
<div class="control-input">
<input type="text" class="form-control formatted-telephone-country" id="telephone-field1a-country" name="telephone_field1a_country" placeholder="+44" value="">
<input type="text" class="form-control formatted-telephone-area" id="telephone-field1a-area" name="telephone_field1a_area" placeholder="121" value="">
<input type="text" class="form-control formatted-telephone-number" id="telephone-field1a-number" name="telephone_field1a_number" placeholder="123 4567" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group formatted-telephone">
<label class="sr-only" for="inline-telephone-field1a-country">Telephone:</label>
<input type="text" class="form-control formatted-telephone-country" id="inline-telephone-field1a-country" name="inline_telephone_field1a_country" placeholder="+44" value="">
<input type="text" class="form-control formatted-telephone-area" id="inline-telephone-field1a-area" name="inline_telephone_field1a_area" placeholder="121" value="">
<input type="text" class="form-control formatted-telephone-number" id="inline-telephone-field1a-number" name="inline_telephone_field1a_number" placeholder="123 4567" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group formatted-telephone disabled">
<label for="telephone-field1b-country" class="control-label">Telephone:</label>
<div class="control-input">
<input type="text" disabled="disabled" class="form-control formatted-telephone-country" id="telephone-field1b-country" name="telephone_field1b_country" placeholder="+44" value="">
<input type="text" disabled="disabled" class="form-control formatted-telephone-area" id="telephone-field1b-area" name="telephone_field1b_area" placeholder="121" value="">
<input type="text" disabled="disabled" class="form-control formatted-telephone-number" id="telephone-field1b-number" name="telephone_field1b_number" placeholder="123 4567" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group formatted-telephone disabled">
<label class="sr-only" for="inline-telephone-field1b-country">Telephone:</label>
<input type="text" disabled="disabled" class="form-control formatted-telephone-country" id="inline-telephone-field1b-country" name="inline_telephone_field1b_country" placeholder="+44" value="">
<input type="text" disabled="disabled" class="form-control formatted-telephone-area" id="inline-telephone-field1b-area" name="inline_telephone_field1b_area" placeholder="121" value="">
<input type="text" disabled="disabled" class="form-control formatted-telephone-number" id="inline-telephone-field1b-number" name="inline_telephone_field1b_number" placeholder="123 4567" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group formatted-telephone invalid">
<label for="telephone-field1c-country" class="control-label">Telephone:</label>
<div class="control-input">
<input type="text" class="form-control formatted-telephone-country" id="telephone-field1c-country" name="telephone_field1c_country" placeholder="+44" value="">
<input type="text" class="form-control formatted-telephone-area" id="telephone-field1c-area" name="telephone_field1c_area" placeholder="121" value="">
<input type="text" class="form-control formatted-telephone-number" id="telephone-field1c-number" name="telephone_field1c_number" placeholder="123 4567" value="">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group formatted-telephone invalid">
<label class="sr-only" for="inline-telephone-field1c-country">Telephone:</label>
<input type="text" class="form-control formatted-telephone-country" id="inline-telephone-field1c-country" name="inline_telephone_field1c_country" placeholder="+44" value="">
<input type="text" class="form-control formatted-telephone-area" id="inline-telephone-field1c-area" name="inline_telephone_field1c_area" placeholder="121" value="">
<input type="text" class="form-control formatted-telephone-number" id="inline-telephone-field1c-number" name="inline_telephone_field1c_number" placeholder="123 4567" value="">
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group form-group-last formatted-telephone readonly">
<label for="telephone-field1d-country" class="control-label">Telephone:</label>
<div class="control-input">
<input type="text" class="form-control formatted-telephone-country" readonly="readonly" id="telephone-field1d-country" name="telephone_field1d_country" placeholder="+44" value="+44">
<input type="text" class="form-control formatted-telephone-area" readonly="readonly" id="telephone-field1d-area" name="telephone_field1d_area" placeholder="121" value="01234">
<input type="text" class="form-control formatted-telephone-number" readonly="readonly" id="telephone-field1d-number" name="telephone_field1d_number" placeholder="123 4567" value="555555">
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group form-group-last formatted-telephone readonly">
<label class="sr-only" for="inline-telephone-field1d-country">Telephone:</label>
<input type="text" class="form-control formatted-telephone-country" readonly="readonly" id="inline-telephone-field1d-country" name="inline_telephone_field1d_country" placeholder="+44" value="+44">
<input type="text" class="form-control formatted-telephone-area" readonly="readonly" id="inline-telephone-field1d-area" name="inline_telephone_field1d_area" placeholder="121" value="01234">
<input type="text" class="form-control formatted-telephone-number" readonly="readonly" id="inline-telephone-field1d-number" name="inline_telephone_field1d_number" placeholder="123 4567" value="555555">
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group formatted-telephone">
<label for="<!-- Country input control ID goes here -->">Telephone:</label>
<input type="text" class="form-control formatted-telephone-country" id="<!-- Country input control ID goes here -->" name="<!-- Country input control name goes here -->" placeholder="+44" value="<!-- Country input control value goes here -->">
<input type="text" class="form-control formatted-telephone-area" id="<!-- Area input control ID goes here -->" name="<!-- Area input control name goes here -->" placeholder="121" value="<!-- Area input control value goes here -->">
<input type="text" class="form-control formatted-telephone-number" id="<!-- Number input control ID goes here -->" name="<!-- Number input control name goes here -->" placeholder="123 4567" value="<!-- Number input control value goes here -->">
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-checkbox"></a>
<header class="content-header">
<h1 class="title">
Checkbox
</h1>
</header>
<p>
Checkbox controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code> and <code><label></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group checkbox">
<input type="checkbox" class="form-control" id="checkbox-field1a" name="checkbox_field1a" value="">
<label for="checkbox-field1a">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Label first
</td>
<td>
class
<br/><br/>
label-first
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input checkbox label-first">
<input type="checkbox" class="form-control" id="checkbox-field2a" name="checkbox_field2a" value="">
<label for="checkbox-field2a">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Left aligned
</td>
<td>
class
<br/><br/>
left-aligned
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input checkbox left-aligned">
<input type="checkbox" class="form-control" id="checkbox-field3b" name="checkbox_field3a" value="">
<label for="checkbox-field3b">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - No label
</td>
<td>
class
<br/><br/>
no-label
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input checkbox no-label">
<input type="checkbox" class="form-control" id="checkbox-field3a" name="checkbox_field3a" value="">
<label for="checkbox-field3a">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input checkbox disabled">
<input type="checkbox" disabled="disabled" class="form-control" id="checkbox-field1c" name="checkbox_field1c" value="">
<label for="checkbox-field1c" class="disabled">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group checkbox invalid">
<input type="checkbox" class="form-control" id="checkbox-field1d" name="checkbox_field1d" value="">
<label for="checkbox-field1d">
<span class="checkbox-icon"></span>
Checkbox
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled and Checked
</td>
<td>
class
</td>
<td>
disabled checked
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input checkbox disabled">
<input type="checkbox" id="checkbox-field1e" name="checkbox_field1e" value="" disabled="disabled" checked="checked">
<label for="checkbox-field1e" class="disabled checked">
<span class="checkbox-icon"></span>
Checkbox disabled and checked
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group checkbox">
<input type="checkbox" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="">
<label for="<!-- Input control ID goes here -->">
<span class="checkbox-icon"></span>
<!-- Label text goes here -->
</label>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-tristate"></a>
<header class="content-header">
<h1 class="title">
Tristate
</h1>
</header>
<p>
Tristate controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code> and <code><label></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form">
<div class="form-group">
<div class="tristate">
<input type="hidden" class="value" value="1">
<input type="hidden" class="altvalue" value="2">
<input type="checkbox" class="form-control" id="tristate-field1a" name="tristate_field1a" value="1">
<label for="tristate-field1a">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Label First
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form">
<div class="form-group">
<div class="tristate">
<input type="hidden" class="value" value="1">
<input type="hidden" class="altvalue" value="2">
<input type="checkbox" class="form-control" id="tristate-field2a" name="tristate_field2a" value="1">
<label for="tristate-field2a">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Alternate Value
</td>
<td>
class
</td>
<td>
altstate
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group tristate">
<input type="hidden" class="value" value="1">
<input type="hidden" class="altvalue" value="2">
<input type="checkbox" class="form-control" id="tristate-field1b" name="tristate_field1b" value="2">
<label for="tristate-field1b" class="altstate">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group tristate disabled">
<input type="hidden" class="value" value="1">
<input type="hidden" class="altvalue" value="2">
<input type="checkbox" disabled="disabled" class="form-control" id="tristate-field1c" name="tristate_field1c" value="1">
<label for="tristate-field1c" class="disabled">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group tristate invalid">
<input type="hidden" class="value" value="1">
<input type="hidden" class="altvalue" value="2">
<input type="checkbox" class="form-control" id="tristate-field1d" name="tristate_field1d" value="1">
<label for="tristate-field1d">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group tristate">
<input type="hidden" class="value" value="<!-- Input value goes here -->">
<input type="hidden" class="altvalue" value="<!-- Input alternate value goes here -->">
<input type="checkbox" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="<!-- Input selected value goes here -->">
<label for="<!-- Input control ID goes here -->">
<span class="checkbox-icon"></span>
Tristate
</label>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-radio"></a>
<header class="content-header">
<h1 class="title">
Radiobutton
</h1>
</header>
<p>
Radiobutton controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code> and <code><label></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group radio">
<input type="radio" class="form-control" id="radio-field1a" name="radio_field1a" value="">
<label for="radio-field1a">
<span class="radio-icon"></span>
Radiobutton
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Label First
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input radio label-first">
<input type="radio" class="form-control" id="radio-field2a" name="radio_field2a" value="">
<label for="radio-field2a">
<span class="radio-icon"></span>
Radiobutton
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Standard - Left aligned
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group">
<div class="control-input radio left-aligned">
<input type="radio" class="form-control" id="radio-field3a" name="radio_field3a" value="">
<label for="radio-field3a">
<span class="radio-icon"></span>
Radiobutton
</label>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group radio">
<input type="radio" class="form-control" id="radio-field1c" name="radio_field1c" value="" checked="checked">
<label for="radio-field1c" class="checked">
<span class="radio-icon"></span>
Radiobutton checked
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group radio disabled">
<input type="radio" disabled="disabled" class="form-control" id="radio-field1d" name="radio_field1d" value="">
<label for="radio-field1d" class="disabled">
<span class="radio-icon"></span>
Radiobutton disabled
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled and Checked
</td>
<td>
class
</td>
<td>
disabled checked
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group radio disabled">
<input type="radio" disabled="disabled" class="form-control" id="radio-field1e" name="radio_field1d" value="" checked="checked">
<label for="radio-field1e" class="disabled checked">
<span class="radio-icon"></span>
Radio button checked and disabled
</label>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group radio">
<input type="radio" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="">
<label for="<!-- Input control ID goes here -->">
<span class="radio-icon"></span>
<!-- Label text goes here -->
</label>
</div>
</code>
</pre>
<p>
Radiobutton controls also can contain custom values as demonstrated below.
</p>
<form role="form">
<div class="row">
<div class="col-md-4">
<div class="radio">
<input type="radio" id="radio-field4a" name="radio_field4a" value="1">
<label for="radio-field4a">
<span class="radio-icon"></span>
Option1
</label>
</div>
</div>
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
</div>
<div class="radio invalid">
<input type="radio" id="radio-field4b" name="radio_field4a" value="2">
<label for="radio-field4b">
<span class="radio-icon"></span>
Option2
</label>
<input type="text" class="form-control inline" />
</div>
<div class="radio disabled">
<input type="radio" class="form-control disabled" id="radio-field4c" name="radio_field4a" value="3" disabled="disabled">
<label for="radio-field4c">
<span class="radio-icon"></span>
Option3
</label>
<input type="text" class="form-control inline disabled" disabled="disabled" />
</div>
</form>
<pre>
<code>
<div class="form-group radio label-first">
<input type="radio" class="form-control" id="<!-- First input control ID goes here -->" name="<!-- Input control name goes here -->" value="1">
<label for="<!-- First input control ID goes here -->">
<span class="radio-icon"></span>
<!-- Label text goes here -->
</label>
<input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
</div>
<div class="form-group radio invalid">
<input type="radio" class="form-control" id="<!-- Second input control ID goes here -->" name="<!-- Input control name goes here -->" value="2">
<label for="<!-- Second input control ID goes here -->" class="invalid">
<span class="radio-icon"></span>
<!-- Label text goes here -->
</label>
<input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-time"></a>
<header class="content-header">
<h1 class="title">
Time
</h1>
</header>
<p>
Time controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code><input></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<div class="table-wrapper">
<table class="table table-striped">
<colgroup>
<col width="10%"/>
<col width="10%"/>
<col width="15%"/>
<col width="35%"/>
<col width="30%"/>
</colgroup>
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
<th>
Inline Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group time">
<label for="time-field1a" class="control-label">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" id="time-field1a" name="time_field1a" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group time">
<label class="sr-only" for="inline-time-field1a">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" id="inline-time-field1a" name="inline_time_field1a" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group time disabled">
<label for="time-field1b" class="control-label">Time:</label>
<div class="control-input">
<input type="text" disabled="disabled" class="form-control time" id="time-field1b" name="time_field1b" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group time disabled">
<label class="sr-only" for="inline-time-field1b">Time:</label>
<div class="control-input">
<input type="text" disabled="disabled" class="form-control time" id="inline-time-field1b" name="inline_time_field1b" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group time invalid">
<label for="time-field1c" class="control-label">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" id="time-field1c" name="time_field1c" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group time invalid">
<label class="sr-only" for="inline-time-field1c">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" id="inline-time-field1c" name="inline_time_field1c" placeholder="Enter time" value="">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group form-group-last time readonly">
<label for="time-field1d" class="control-label">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" readonly="readonly" id="time-field1d" name="time_field1d" placeholder="Enter time" value="example">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
<td>
<form role="form" class="form-inline">
<div class="form-row">
<div class="form-group form-group-last time readonly">
<label class="sr-only" for="inline-time-field1d">Time:</label>
<div class="control-input">
<input type="text" class="form-control time" readonly="readonly" id="inline-time-field1d" name="inline_time_field1d" placeholder="Enter time" value="example">
<span class="add-on">
<span class="fa fa-clock-o"></span>
</span>
</div>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<div class="form-group time">
<label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
<div class="control-input">
<input type="text" class="form-control time" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter time" value="<!-- Input control value goes here -->">
<span class="add-on">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</code>
</pre>
</div>
<br/>
<div>
<a id="forms-image"></a>
<header class="content-header">
<h1 class="title">
Image
</h1>
</header>
<p>
Image controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code><button></code> tag, and classes should follow on from the surrounding <code><div></code>.
</p>
<p>
The control contains an <code><img></code> tag to display either a relevant placeholder or a preview of the currently uploaded file.
</p>
<p>
Currently, 2 placeholder images have been included, namely <code>image_placeholder.png</code> and <code>image_placeholderb.png</code>
</p>
<div class="table-wrapper">
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Standard Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group image-input">
<input type="file" class="form-control file-input-image sr-only" id="image-field1a" name="image_field1a">
<div class="image-display-wrapper">
<img class="image-input-image" alt="" src="/images/image_placeholder.png" />
</div>
<label for="image-field1a" class="btn btn-icon btn-default btn-file-choose">
<span class="fa fa-search"></span>
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
class
<br/><br/>
disabled
</td>
<td>
disabled
<br/><br/>
disabled
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group image-input disabled">
<input type="file" disabled="disabled" class="form-control file-input-image sr-only" id="image-field1b" name="image_field1b">
<div class="image-display-wrapper">
<img class="image-input-image" alt="" src="/images/image_placeholderb.png" />
</div>
<label for="image-field1b" class="btn btn-icon btn-default btn-file-choose" disabled="disabled">
<span class="fa fa-search"></span>
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Invalid
</td>
<td>
class
</td>
<td>
invalid
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group image-input invalid">
<input type="file" class="form-control file-input-image sr-only" id="image-field1c" name="image_field1c">
<div class="image-display-wrapper">
<img class="image-input-image" alt="" src="/images/image_placeholder.png" />
</div>
<label for="image-field1c" class="btn btn-icon btn-default btn-file-choose">
<span class="fa fa-search"></span>
</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
Read Only
</td>
<td>
class
<br/><br/>
readonly
</td>
<td>
readonly
<br/><br/>
readonly
</td>
<td>
<form role="form">
<div class="form-row">
<div class="form-group image-input form-group-last readonly">
<input type="file" class="form-control file-input-image sr-only" id="image-field1d" name="image_field1d">
<div class="image-display-wrapper">
<img class="image-input-image" alt="" src="/images/image_placeholder.png" />
</div>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<pre>
<code>
<form role="form">
<div class="form-row">
<div class="form-group image-input">
<input type="file" class="form-control file-input-image sr-only" id="image-field1a" name="image_field1a">
<div class="image-display-wrapper">
<img class="image-input-image" alt="" src="images/image_placeholder.png" />
</div>
<label for="image-field1a" class="btn btn-icon btn-default btn-file-choose">
<span class="glyphicon glyphicon-search"></span>
</label>
</div>
</div>
</form>
</code>
</pre>
</div>
<br/>
<div>
<a id="spinbox"></a>
<header class="content-header">
<h1 class="title">
Spin Box
</h1>
</header>
<p>
A Spin Box is used to adjust or change value in the adjoining text box by either clicking on the up or down arrow.
</p>
<p>You can use different data attributes on <code><input type="text" class="form-control"></code>to set some default behaviour to the Spin Box</p>
<p><code>data-spin-min="-10"</code> to set minimum allowed value. Default is 0</p>
<p><code>data-spin-max="10"</code> to set maximum allowed value. Default is 100</p>
<p><code>data-spin-steps="2"</code> to set increment/ decrement steps. Default is 1</p>
<p><code>data-spin-value="8"</code> to set initial value.</p>
<p><code>data-spin-decimals="2"</code> to set allowed decimal value. Default is 0</p>
<p>Example: </p>
<h3 class="title">Form Horizontal</h3>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box">
<label for="number1" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number1" class="form-control" data-spin-min="-10" data-spin-max="10" data-spin-steps="2">
</div>
</div>
</div>
</form>
<br/>
<pre><code>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box">
<label for="number1" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number1" class="form-control" data-spin-min="-10" data-spin-max="10" data-spin-steps="2">
</div>
</div>
</div>
</form>
</code></pre>
<br/>
<h3 class="title">Form Inline</h3>
<form class="form-inline">
<div class="form-row">
<div class="form-group spin-box">
<label for="number2" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number2" class="form-control">
</div>
</div>
</div>
</form>
<br/>
<pre><code>
<form class="form-inline">
<div class="form-row">
<div class="form-group spin-box">
<label for="number2" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number2" class="form-control">
</div>
</div>
</div>
</form>
</code></pre>
<br/>
<h3 class="title">Disabled</h3>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box disabled">
<label for="number3" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number3" class="form-control" disabled="disabled">
</div>
</div>
</div>
</form>
<br/>
<pre><code>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box disabled">
<label for="number3" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number3" class="form-control" disabled="disabled">
</div>
</div>
</div>
</form>
</code></pre>
<br/>
<h3 class="title">Invalid</h3>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box invalid">
<label for="number4" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number4" class="form-control">
</div>
</div>
</div>
</form>
<pre><code>
<form class="form-horizontal">
<div class="form-row">
<div class="form-group spin-box invalid">
<label for="number4" class="control-label">Number: </label>
<div class="control-input">
<input type="text" id="number4" class="form-control">
</div>
</div>
</div>
</form>
</code></pre>
</div>
<br/>
<div>
<a id="forms-color"></a>
<header class="content-header">
<h1 class="title">
Color
</h1>
</header>
<p>A color component allows user to select a color within the application.</p>
<h3 class="title">Default</h3>
<form>
<div class="form-group color">
<label for="color1">Select a color: </label>
<div class="input-group">
<input type="text" id="color1" class="form-control" value='#cc3333'/>
<span class="color-drop"></span>
<span class="add-on"><span class="color-picker"></span></span>
</div>
</div>
<div class="form-group color">
<label for="color2">Select a color: </label>
<div class="input-group">
<input type="text" id="color2" class="form-control" value='red' data-color-set='{"colors":"ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000"}'/>
<span class="color-drop"></span>
<span class="add-on"><span class="color-picker"></span></span>
</div>
</div>
</form>
<pre><code>
<form>
<div class="form-group color">
<label for="color1">Select a color: </label>
<div class="input-group">
<input type="text" id="color1" class="form-control" value='#cc3333'/>
<span class="color-drop"></span>
<span class="add-on"><span class="color-picker"></span></span>
</div>
</div>
<div class="form-group color">
<label for="color2">Select a color: </label>
<div class="input-group">
<input type="text" id="color2" class="form-control" value='red' data-color-set='{"colors":"ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000"}'/>
<span class="color-drop"></span>
<span class="add-on"><span class="color-picker"></span></span>
</div>
</div>
</form>
</code></pre>
</div>
<br/>
<div>
<a id="forms-currency"></a>
<header class="content-header">
<h1 class="title">
Currency
</h1>
</header>
<p>A color component allows user to select a color within the application.</p>
<h3 class="title">Default</h3>
<form role="form" class="form-horizontal">
<div class="form-row">
<div class="form-group currency">
<label for="currency1" class="control-label">Currency:</label>
<div class="control-input">
<input type="text" class="form-control" id="currency1" name="select_field1a" data-available-currencies='{"USD": "US Dollar","AUD": "Australian Dollar","EUR": "Euro", "INR": "Indian Rupees"}' />
</div>
</div>
</div>
<div class="form-row">
<div class="form-group currency">
<label for="currency2" class="control-label">Currency:</label>
<div class="control-input">
<input type="text" class="form-control" id="currency2" name="select_field1a" data-available-currencies='{"USD": "US Dollar"}' />
</div>
</div>
</div>
<div class="form-row">
<div class="form-group currency invalid error-hover">
<label for="currency3" class="control-label">Currency:</label>
<div class="control-input">
<input type="text" class="form-control" id="currency3" name="select_field1a" data-available-currencies='{"USD": "US Dollar","EUR": "Euro"}' />
<span class="error-message" data-original-title="" title="">Error Message</span>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group currency disabled">
<label for="currency4" class="control-label">Currency:</label>
<div class="control-input">
<input type="text" class="form-control" id="currency4" name="select_field1a" disabled="disabled" data-available-currencies='{"USD": "US Dollar","EUR": "Euro"}' />
<span class="error-message" data-original-title="" title="">Error Message</span>
</div>
</div>
</div>
</form>
</div>
<br/>
<div>
<a id="forms-advanced-listbox"></a>
<header class="content-header">
<h1 class="title">
Advanced Listbox
</h1>
</header>
<form class="form-horizontal">
<h3 class="title">Multi Select</h3>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb1" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb1" class="selectpicker" multiple>
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
<h3 class="title">Code:</h3>
<pre><code>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb1" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb1" class="selectpicker" multiple>
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
</code></pre>
<br/>
<h3 class="title">Single Select</h3>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb2" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb2" class="selectpicker">
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
<h3 class="title">Code:</h3>
<pre><code>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb2" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb2" class="selectpicker">
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
</code></pre>
<br/>
<h3 class="title">Disabled</h3>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb3" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb3" class="selectpicker" disabled>
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
<h3 class="title">Code:</h3>
<pre><code>
<div class="form-row">
<div class="form-group advanced-listbox">
<label for="alb3" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb3" class="selectpicker" disabled>
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
</div>
</div>
</div>
</code></pre>
<br/>
<h3 class="title">Error</h3>
<div class="form-row">
<div class="form-group advanced-listbox invalid error-hover">
<label for="alb4" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb4" class="selectpicker">
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
<span class="error-message" data-original-title="" title="">Error Message</span>
</div>
</div>
</div>
<h3 class="title">Code:</h3>
<pre><code>
<div class="form-row">
<div class="form-group advanced-listbox invalid error-hover">
<label for="alb4" class="control-label">Assign Roles: </label>
<div class="control-input">
<select name="" id="alb4" class="selectpicker">
<option value="Purchase Clerk">Purchase Clerk</option>
<option value="Sales Clerk">Sales Clerk</option>
<option value="Cash Book Clerk">Cash Book Clerk</option>
<option value="Purchase Clerk Info">Purchase Clerk Info</option>
<option value="Sales Clerk Info">Sales Clerk Info</option>
<option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
<option value="Info Cash Two">Info Cash Two</option>
</select>
<span class="error-message" data-original-title="" title="">Error Message</span>
</div>
</div>
</div>
</code></pre>
</form>
</div>
<br/>
<div>
<a id="forms-select-shuttle"></a>
<header class="content-header">
<h1 class="title">
Select Shuttle
</h1>
</header>
<p>
The Select Shuttle component is used to move items from one list to another, typically between "Available" list to a "Selected" list.
</p>
<form class="form-horizontal" action="">
<div class="form-row">
<div class="form-group">
<label class="control-label" for="select-shuttle">Select Shuttle: </label>
<div class="control-input select-shuttle">
<select multiple="multiple" id="select-shuttle" class="form-control">
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
<option value="option0">Option 11</option>
<option value="option0">Option 12</option>
</select>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
<div class="container site-footer">
<div class="status-holder">
<div class="status-message"></div>
</div>
<!--<a href="#" class="site-footer-toggle">-->
<!--<span class="fa fa-chevron-down"></span>-->
<!--</a>-->
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/causeway-utils.min.js"></script>
<script src="/js/causeway.js"></script>
<script src="/js/responsive.js"></script>
<script src="/docs/js/docs.js"></script>
<script>
(function(window, $){
var statusHolder = $('.status-message'),
date = new Date();
var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
statusHolder.html(message);
}(window, jQuery));
</script>
</body>
</html>