This guide is for building standard forms. All form elements must be wrapped in a .form class
to be styled correctly. This can be in a <form> element, but that is not required.
<form action="#" class="form">
<div class="field">
<label for="unique-id">
Full Name
</label>
<p class="form__static " placeholder="">Stephanie Smith</p>
</div>
<div class="field-group">
<div class="field">
<label for="first-name">
First Name
<span class="required">*</span>
</label> <input id="first-name" type="text" required> </div>
<div class="field">
<label for="last-name">
Last Name
<span class="required">*</span>
</label> <input id="last-name" type="text" required> </div>
<div class="field">
<label for="ssn">
Social Security
<span class="required">*</span>
</label> <input id="ssn" type="text" required>
<p class="field__help">This information is required</p>
</div>
<div class="field">
<label for="birth-place">
Place of Birth
</label> <select id="birth-place">
</select></div>
</div>
<div class="field">
<label for="secret-question">
Secret Question
</label> <input id="secret-question" type="text"> </div>
<div class="field">
<label for="secret-answer">
Secret Answer
</label> <textarea id="secret-answer" rows="8">
</textarea></div>
<footer class="form__footer">
<button class="button button--blue">
Submit
</button> <button class="button button--gray">
Cancel
</button> <span class="form-links"><a href="#">Action link</a></span>
</footer>
</form><label for="unique-id">
Field Label
</label><input id="unique-id" type="text">The static input field is meant to look like a form field with the option of making it act
like a form field by using the contenteditable attribute. Like normal text fields, this
element will not wrap, but will instead truncate overflow text with an ellipsis as an indicator.
Stephanie Smith
<p class="form__static " placeholder="">Stephanie Smith</p>A variation of the static input component that simply allows content to wrap.
This static input field will wrap to multiple lines if the text excedes the width of it's container.
<p class="form__static form__static--wrap " placeholder="">This static input field will wrap to multiple lines if the text excedes the width of it's container.</p>To prefix a field with an icon, just add the icon class to the input element.
<input id="unique-id" type="text" class="icon-dollar-sign"><input id="unique-id" type="text" disabled><input id="unique-id" type="text" placeholder="First Name Placeholder"><textarea id="unique-id" rows="8">
</textarea>Native <select> controls are modified with the Chosen.js library to present a standardized
visual style across browsers. If the options list exceeds 5 items, the element will allow
filtering by typing the beginning of a value.
<select id="unique-id">
</select><label class="form__checkbox">
<input id="unique-id" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 1
</label>Multiple checkbox options can be grouped in a fieldset, using the fieldset legend as a label for the entire group.
<fieldset>
<legend>These are your options</legend>
<label class="form__checkbox">
<input id="option1" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 1
</label> <label class="form__checkbox">
<input id="option2" type="checkbox" checked>
<span class="icon-checkbox form__selector"></span>
Option 2
</label> <label class="form__checkbox">
<input id="option3" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 3 what if this has some really long text?
</label> <label class="form__checkbox">
<input id="option4" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 4
</label>
</fieldset><label class="form__radio">
<input id="unique-id" type="radio" name="radio">
<span class="form__selector"></span>
Option 1
</label>Multiple radio options can be grouped in a fieldset, using the fieldset legend as a label for the entire group.
<fieldset>
<legend>Choose one option</legend>
<label class="form__radio">
<input id="option1" type="radio" name="radio">
<span class="form__selector"></span>
Option 1
</label> <label class="form__radio">
<input id="option2" type="radio" name="radio" checked>
<span class="form__selector"></span>
Option 2
</label> <label class="form__radio">
<input id="option3" type="radio" name="radio">
<span class="form__selector"></span>
Option 3 what if this has some really long text?
</label> <label class="form__radio">
<input id="option4" type="radio" name="radio">
<span class="form__selector"></span>
Option 4
</label>
</fieldset>To implement a calendar picker in your forms, use an input of type=text and add
the custom data-picker attribute. To limit the range of dates available, use
the additional attributes data-start-date and/or data-end-date. To disable the
selection of weekends, use the attribute data-disable-weekends on the input. The values for
these dates should be YYYY-MM-DD or an integer representing the relative amount of
days offset from today. Adding the icon-calendar class will include a calendar icon
on the input.
<input id="date-unique-id" type="text" class="icon-calendar" data-picker data-disable-weekends data-start-date="-5" data-end-date="3">In most circumstances all form controls should be wrapped in a .field class which will encapsulate
the form control, it's label, optional help text and any error message that is generated.
<div class="field">
<input id="unique-id" type="text"> </div>By default inputs inside field components will have a 100% width. To make an input smaller in some
circumstances (ie. fields by themselves, date fields, select fields) apply the .smaller-input
class to the <input> or <select> element.
<div class="field">
<input type="text" class="smaller-input">
</div>
<div class="field">
<select class="smaller-input">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>Add an astrisk inside a span.required element directly after the label.
<div class="field">
<label for="required-field">
Required
<span class="required">*</span>
</label> <input id="required-field" type="text" required> </div>To include a help message for any field add a <p> element with a class of field__help just
after the form element.
Here is a help message that runs very long to make sure it wraps will in all circumstances
<div class="field">
<label for="help-field">
Field with Help
</label> <input id="help-field" type="text">
<p class="field__help">Here is a help message that runs very long to make sure it wraps will in all circumstances</p>
</div>Indicate errors on a field by including the field--error class to div.field and optionally
include an error message inside p.field__error placed just after the input and before any
help message.
This is an error message related to this field
Here is a help message
You must select an option
You must select an option
You must select an option
<div class="field field--error">
<label for="help-field">
Field with Help
</label> <input id="help-field" type="text">
<p class="field__error">This is an error message related to this field</p>
<p class="field__help">Here is a help message</p>
</div>
<div class="field field--error">
<fieldset>
<legend>Choose one option</legend>
<label class="form__radio">
<input id="option1" type="radio" name="radio">
<span class="form__selector"></span>
Option 1
</label> <label class="form__radio">
<input id="option2" type="radio" name="radio" checked>
<span class="form__selector"></span>
Option 2
</label> <label class="form__radio">
<input id="option3" type="radio" name="radio">
<span class="form__selector"></span>
Option 3 what if this has some really long text?
</label> <label class="form__radio">
<input id="option4" type="radio" name="radio">
<span class="form__selector"></span>
Option 4
</label>
</fieldset>
<p class="field__error">You must select an option</p>
</div>
<div class="field field--error">
<fieldset>
<legend>These are your options</legend>
<label class="form__checkbox">
<input id="option1" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 1
</label> <label class="form__checkbox">
<input id="option2" type="checkbox" checked>
<span class="icon-checkbox form__selector"></span>
Option 2
</label> <label class="form__checkbox">
<input id="option3" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 3 what if this has some really long text?
</label> <label class="form__checkbox">
<input id="option4" type="checkbox">
<span class="icon-checkbox form__selector"></span>
Option 4
</label>
</fieldset>
<p class="field__error">You must select an option</p>
</div>
<div class="field field--error">
<label for="select-error">
Select Error
</label> <select id="select-error">
</select>
<p class="field__error">You must select an option</p>
</div>Wrap fields inside a .field-group class to use a two-column layout for fields on larger
screens.
<div class="field-group">
<div class="field">
<label for="first-field">
First Field
</label> <input id="first-field" type="text"> </div>
<div class="field">
<label for="second-field">
Second Field
</label> <input id="second-field" type="text"> </div>
<div class="field">
<label for="third-field">
Third Field
</label> <input id="third-field" type="text"> </div>
<div class="field">
<label for="fourth-field">
Fourth Field
</label> <input id="fourth-field" type="text"> </div>
</div>The Add Field allows inline editing of new fields.
<div class="field-edit field-edit--add add-field">
<p class="form__static field-edit__value form__static--new" placeholder="email or phone">Stephanie Smith</p>
<div class="field-edit__controls">
<a href="#" class="field-edit__control field-edit__control--save js-edit-done">save</a>
<a href="#" class="field-edit__control field-edit__control--cancel js-edit-done">cancel</a>
</div>
<a href="#" class="field-edit__add profile__add js-edit-start">
<span class="field-edit__add-icon profile__add-icon icon-add"></span> Add an alternate contact
</a>
</div>The Edit Field allows inline editing of individual fields.
<div class="field-edit">
<p class="form__static field-edit__value" placeholder="">Stephanie Smith</p>
<div class="field-edit__controls">
<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
</div>
</div>The Edit Password Field allows inline editing of passwords ensuring use of password inputs and a confirmation field.
<div class="field-edit">
<p class="form__static field-edit__pwd-value" placeholder="">(hidden)</p>
<fieldset class="field-edit__password">
<input id="unique-id" type="password" placeholder="new password"> <input id="unique-id" type="password" placeholder="confirm password"> </fieldset>
<div class="field-edit__controls">
<a href="#" class="field-edit__control field-edit__control--edit js-edit-start">edit</a>
<a href="#" class="field-edit__control field-edit__control--save js-hidden js-edit-done">save</a>
<a href="#" class="field-edit__control field-edit__control--cancel js-hidden js-edit-done">cancel</a>
</div>
</div><label class="slide-toggle">
<span class="slide-toggle__label">
Option 1 with longer text that wraps on small
</span>
<input id="unique-id" type="checkbox">
<span class="slide-toggle__selector"></span>
</label><label class="slide-toggle--question slide-toggle">
<span class="slide-toggle__label">
Question?
</span>
<input id="unique-id" type="checkbox">
<span class="slide-toggle__selector"></span>
</label><input id="unique-id" type="file">Client-side (javascript) form validation is handled using the ParsleyJS
library. To make a field required, simply add the required attribute to the input. A generic
error message will be used on required fields, unless you provide a custom message by adding
the data-parsley-error-message attribute to the input as well. For required groups like radios
or checkboxes, add an empty <div> at the bottom of the group where you would like an error to
appear and then add the data-parsley-errors-container attribute with a value of the selector
for that empty <div>.
<form class="form" action="/test" method="post" data-validate>
<div class="field-group">
<div class="field">
<label for="required-field">
Required Field
<span class="required">*</span>
</label> <input id="required-field" type="text" required> </div>
<div class="field">
<label for="custom-validation-message">
Custom Validation Message
<span class="required">*</span>
</label>
<input id="custom-validation-message" name="custom" type="text" required data-parsley-error-message="This is a custom error message">
</div>
</div>
<fieldset>
<label class="form__radio">
<input type="radio" name="option" value="Option A" required data-parsley-errors-container="#MiscOptionsError" data-parsley-error-message="Please select from Option A or B">
<span class="form__selector"></span> Option A
</label>
<label class="form__radio">
<input type="radio" name="option" value="Option B">
<span class="form__selector"></span> Option B
</label>
<div id="MiscOptionsError"></div>
</fieldset>
<footer class="form__footer">
<button class="button button--blue">
Submit
</button> </footer>
</form>Form conditionals are special attributes added HTML elements that allow certain fields to be revealed or hidden based on the selection of a radio value. Fields that are hidden in this way will be disabled and will not be validated.
<form class="form" action="/test" method="post" data-validate>
<fieldset>
<label class="form__radio">
<input type="radio" name="option" value="Option A" required data-parsley-errors-container="#Misc2OptionsError" data-parsley-error-message="Please select from Option A or B">
<span class="form__selector"></span> Option A
</label>
<label class="form__radio">
<input type="radio" name="option" value="Option B" data-if data-if-target="#OptionBFields">
<span class="form__selector"></span> Option B
</label>
<div id="Misc2OptionsError"></div>
</fieldset>
<fieldset id="OptionBFields">
<legend>Only Available When Option B is Selected</legend>
<div class="field">
<label for="additional-field">
Additional Field
<span class="required">*</span>
</label> <input id="additional-field" type="text" required> </div>
</fieldset>
<footer class="form__footer">
<button class="button button--blue">
Submit
</button> </footer>
</form>To have a form submit via AJAX to Lotus Notes, add the data-lotus-submit attribute to the form element. The Lotus
Notes server requires one hidden field named SendTo with the proper delivery address: <input type="hidden" name="SendTo" value="{kub_webform_sendto}">.
The form will post to the URL in the action attribute of the form.
Both an alert and success message should be added to the top of the form using the Alert Success and Alert Warning components. These
will be hidden by default but will be revealed when the form is submitted. The success alert should have an element with a class of
js-transaction-number. On a successful submission a transaction number from the server will be appended to that element.
<form class="form" action="/lotus-notes-post.html" method="post" data-validate data-lotus-submit>
<div class="alert alert--success">
<p>Thank you for your request. A confirmation email has been sent to you.</p>
<p>Please reference tracking number <strong class="js-transaction-number">UNKOWN</strong> for related correspondence.</p>
</div>
<div class="alert alert--warning">
There was a problem submitting your form. Please wait a moment and try again.
</div>
<fieldset>
<div class="field">
<label for="additional-field">
Additional Field
<span class="required">*</span>
</label> <input id="additional-field" type="text" required> </div>
</fieldset>
<footer class="form__footer">
<button class="button button--blue">
Submit
</button> </footer>
</form><label class="slide-toggle loading">
<span class="slide-toggle__label">
Option 1 with longer text that wraps on small
</span>
<input id="unique-id" type="checkbox">
<span class="slide-toggle__selector"></span>
</label>