Version 3.0.6

Inputs

Text inputs allow the user to input text, select text, and lookup data via auto-completion.

Accessibility Note:<label></label> tags should either wrap around input elements OR use the "for" property. The "for" property connects the label to an input using the input's "id" property. If you are not using a label tag, the input should still be labeled via the aria-label or aria-labelledby properties.

Text inputs with labels on top are the preferred text input layout.

                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="input-1">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-1" type="text" placeholder="Placeholder" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-2">Required Input Label
<span class="error">*</span>
</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-2" type="text" placeholder="Placeholder" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-3">Disabled Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-3" type="text" placeholder="Placeholder" disabled="disabled" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-4">Read-Only Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-4" type="text" placeholder="Placeholder" value="This is a read-only input" readonly" />
</div>
</li>
</ul>
<li class="input-unit">
<label class="input-label" for="input-5">Textarea Input</label>
<div class="input-control">
<textarea class="input-element" id="input-5" type="text" placeholder="Placeholder" ></textarea>
</div>
</li>
</ul>

Text inputs with labels in-line are used to reduce the amount of vertical space of a form. They should not be used on their own - they must belong to a group of fields.

                      
<ul class="input-list horizontal">
<li class="input-unit">
<label class="input-label" for="input-5">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-5" type="text" placeholder="Placeholder" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-6">Required Input Label
<span class="error">*</span>
</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-6" type="text" placeholder="Placeholder" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-7">Disabled Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-7" type="text" placeholder="Placeholder" disabled="disabled" />
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-8">Read-Only Input Label</label>
<div class="input-control">
<input class="input-element input-element-base" id="input-8" type="text" placeholder="Placeholder" value="This is a read-only input" readonly" />
</div>
</li>
</ul>
<li class="input-unit">
<label class="input-label" for="input-9">Textarea Input</label>
<div class="input-control">
<textarea class="input-element" id="input-9" type="text" placeholder="Placeholder" ></textarea>
</div>
</li>
</ul>

Tips and input messages are used to guide the user toward quality and accurate data entry. Tips are the preferred method of pre-validation information attached to fields; however, if a tip is deemed highly important, a default message can be used to surface that information for the user.

Info, Warning, and Error messages are shown post-validation to inform the user of an action (e.g. Auto-Save), flag errors, and suggest next steps to correct possible mistakes.

  • I'm a default message. I'm great for helpful hints before validation.
  • I'm an info message. I'm great for auto-save messaging and other helpful hints after validation.
  • I'm a warning message. I'm great for warning users about issues after validation and suggesting next steps.
  • I'm an error message. I'm great for alerting users of an error after validation and suggesting next steps.

  • I'm a default message. I'm great for helpful hints before validation.
  • I'm an info message. I'm great for auto-save messaging and other helpful hints after validation.
  • I'm a warning message. I'm great for warning users about issues after validation and suggesting next steps.
  • I'm an error message. I'm great for alerting users of an error after validation and suggesting next steps.
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="input-9">Input Label with Tip
<a class="input-label-tip"" href="javascript:void(0)" uib-tooltip="I'm an input tip. I'm great for giving users more clarity about a particular term or input."></a>
</label>
<div class="input-control">
<input id="input-9" class="input-element input-element-base" type="text" placeholder="Placeholder" aria-label="Input Label"/>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-10">Input Label with Default Message</label>
<div class="input-control">
<input id="input-10" class="input-element input-element-base" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message">I’m a default message. I’m great for helpful hints before validation.</span>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-11">Input Label with Info Message</label>
<div class="input-control">
<input id="input-11" class="input-element input-element-base info" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message info">I’m an info message. I’m great for auto-save messaging and other helpful hints after validation.>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-12">Input Label with Warning Message</label>
<div class="input-control">
<input id="input-12" class="input-element input-element-base warn" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message warn">I'm a warning message. I'm great for warning users about issues after validation and suggesting next steps.>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-13">Input Label with Error Message</label>
<div class="input-control">
<input id="input-13" class="input-element input-element-base error" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message error">I'm a error message. I'm great for alerting users of an error after validation and suggesting next steps.>
</div>
</li>
</ul>
<ul class="input-list horizontal">
<li class="input-unit">
<label class="input-label" for="input-14">Input Label with Tip
<a class="input-label-tip"" href="javascript:void(0)" uib-tooltip="I'm an input tip. I'm great for giving users more clarity about a particular term or input."></a>
</label>
<div class="input-control">
<input id="input-14" class="input-element input-element-base" type="text" placeholder="Placeholder" aria-label="Input Label"/>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-15">Input Label with Default Message</label>
<div class="input-control">
<input id="input-15" class="input-element input-element-base" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message">I’m a default message. I’m great for helpful hints before validation.</span>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-16">Input Label with Info Message</label>
<div class="input-control">
<input id="input-16" class="input-element input-element-base info" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message info">I’m an info message. I’m great for auto-save messaging and other helpful hints after validation.>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-17">Input Label with Warning Message</label>
<div class="input-control">
<input id="input-17" class="input-element input-element-base warn" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message warn">I'm a warning message. I'm great for warning users about issues after validation and suggesting next steps.>
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-18">Input Label with Error Message</label>
<div class="input-control">
<input id="input-18" class="input-element input-element-base error" type="text" placeholder="Placeholder" aria-label="Input Label"/>
<span class="input-message error">I'm a error message. I'm great for alerting users of an error after validation and suggesting next steps.>
</div>
</li>
</ul>
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="input-19">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base credit-card visa" id="input-19" type="text" placeholder="Visa input">
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-20">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base credit-card discover" id="input-20" type="text" placeholder="Discover input">
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-21">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base credit-card mastercard" id="input-21" type="text" placeholder="Mastercard input">
</div>
</li>
<li class="input-unit">
<label class="input-label" for="input-22">Input Label</label>
<div class="input-control">
<input class="input-element input-element-base credit-card amex" id="input-22" type="text" placeholder="AMEX input">
</div>
</li>
</ul>
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="input-26">Input Label</label>
<div class="input-control">
<div class="input-container with-button">
<input class="input-element input-element-base" id="input-26" type="text" placeholder="Input with button">
<button class="btn btn-blue">Button</button>
</div>
</div>
</li>
</ul>
                      
<ul class="input-list">
<li class="input-unit">
<label for="datepicker-1" class="input-label">Input Label</label>
<div class="input-control">
<div class="input-container input-calendar">
<span aria-hidden="true" class="glyphicons glyphicons-calendar"></span>
<input id="datepicker-1" type="text" placeholder="MM/DD/YYYY" onfocus="showCalendarControl(this,'M/d/yy');" class="input-element input-element-base">
</div>
</div>
</li>
</ul>
                      
<div class="input-unit" ng-app="angBootstrapComponents" ng-controller="DatePickerExample">
<div class="input-control">
<label class="input-label" for="datepicker-2">Input Label</label>
<div class="input-container input-calendar">
<span class="glyphicons glyphicons-calendar" aria-hidden="true" ng-click="open($event)"></span>
<input class="input-element input-element-base" id="datepicker-2" type="text" " placeholder="Input with cal icon" ng-click="open($event)" uib-datepicker-popup="MM/dd/yyy" ng-model="dt" is-open="status.opened" datepicker-options="dateOptions">
</div>
</div>
</div>
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="daterangepicker-1">Input Label</label>
<div class="input-control">
<div class="input-container input-calendar range" auto-close="outsideClick" is-open="isOpen" uib-dropdown>
<span class="glyphicons glyphicons-calendar" aria-hidden="true"></span>
<input class="input-element select" id="daterangepicker-1" type="text" placeholder="MM/DD/YYYY - MM/DD/YYYY" ng-model="dateRangeUpdate.range" ng-model-options="{ getterSetter: true }" ng-keypress="$event.keyCode === 13 ? !isOpen : return;" readonly uib-dropdown-toggle>
<ul class="dropdown-menu uib-dropdown-menu" role="menu" ng-click="$event.stopPropagation()">
<li>
<div class="range-control">
<div class="calendar-unit">
<uib-datepicker ng-model="dt2" max-mode="day" max-date="maxDate" ng-click="setFromDate(dt2);"></uib-datepicker>
<label class="input-label" for="daterangepicker-from">From</label>
<div class="input-control">
<div class="input-container input-calendar">
<span class="glyphicons glyphicons-calendar" aria-hidden="true"></span>
<input class="input-element" ng-model="dt2" ng-model-options="{ updateOn: blur }" id="daterangepicker-from" uib-datepicker-popup="MM/dd/yyyy" placeholder="MM/DD/YYYY" ng-change="setFromDate(dt2);" on-open-focus="false">
</div>
</div>
</div>
<div class="calendar-unit">
<uib-datepicker ng-model="dt3" max-mode="day" min-date="minDate" ng-click="setFromDate(dt3);"></uib-datepicker>
<label class="input-label" for="daterangepicker-to">To</label>
<div class="input-control">
<div class="input-container input-calendar">
<span class="glyphicons glyphicons-calendar" aria-hidden="true"></span>
<input class="input-element" ng-model="dt3" ng-model-options="{ updateOn: blur }" id="daterangepicker-2" uib-datepicker-popup="MM/dd/yyyy" placeholder="MM/DD/YYYY" ng-change="setFromDate(dt3);" on-open-focus="false">
</div>
</div>
</div>
<div class="button-panel">
<button class="btn btn-full" ng-class="{'btn-blue': activeButton === 'today', 'btn-gray': activeButton !== 'today'}" ng-click="setRange('today');">
<span class="glyphicons glyphicons-ok"aria-hidden="true"></span> Today
</button>
<button class="btn btn-full" ng-class="{'btn-blue': activeButton === 'yesterday', 'btn-gray': activeButton !== 'yesterday'}" ng-click="setRange('yesterday');">
<span class="glyphicons glyphicons-ok"aria-hidden="true"></span> Yesterday
</button>
<button class="btn btn-full" ng-class="{'btn-blue': activeButton === 'thisWeek', 'btn-gray': activeButton !== 'thisWeek'}" ng-click="setRange('thisWeek');">
<span class="glyphicons glyphicons-ok"aria-hidden="true"></span> This Week
</button>
<button class="btn btn-full" ng-class="{'btn-blue': activeButton === 'lastWeek', 'btn-gray': activeButton !== 'lastWeek'}" ng-click="setRange('lastWeek');">
<span class="glyphicons glyphicons-ok"aria-hidden="true"></span> Last Week
</button>
<button class="btn btn-full" ng-class="{'btn-blue': activeButton === 'thisMonth', 'btn-gray': activeButton !== 'thisMonth'}" ng-click="setRange('thisMonth');">
<span class="glyphicons glyphicons-ok"aria-hidden="true"></span> This Month
</button>
<div class="action-buttons">
<button class="btn btn-gray" ng-click="clearAll();">Clear</button>
<button class="btn btn-blue"ng-click="isOpen = false;">Save</save>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="select-input-1">Input Label</label>
<div class="input-control">
<select class="input-element input-element-base select" id="select-input-1">
<option value="1">Option</option>
</select>
</div>
</li>
</ul>

The select2 input is used when a select element needs a filter inside it. This example uses the angular-ui select2 template.

  • {{$select.selected.name}}
                      
<ul class="input-list">
<li class="input-unit">
<label class="input-label" for="select2-input-1">Input Label</label>
<div class="input-control">
<ui-select ng-model="fruit.selected" id="select2-input-1" theme="select2" ng-disabled="disabled" class="input-select2">
<ui-select-match placeholder="Choose a fruit"></ui-select-match>
<ui-select-choices repeat="fruit in fruits | filter: {name: $select.search}">
<div ng-bind-html="fruit.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</li>
</ul>

Search Results

Powered by