Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements are set to width: 100%, with a maximum of 400px by default. Wrap labels and controls in .form-item for optimum spacing.
Form fields are wrapped in a .form-wrapper, for visual distance from other blocks.
Form buttons are wrapped in a .form-actions so we can align them horizontally.
In this example you can see the most used form elements and their default styling. Scroll further down to see each form element explained.
<div class='form-wrapper'>
<div class='form-item'>
<label class='form-label' for='edit-name'>
Text input
<span class='form-required' title='This field is required.'>*</span>
</label>
<div class='form-description'>This is a description.</div>
<input class='form-text' type='text' placeholder='type your input here' />
</div>
<div class='form-item'>
<label class='form-label' for='edit-password'>
Password
<span class='form-required' title='This field is required.'>*</span>
</label>
<input class='form-text' type='password' placeholder='type your input here' />
</div>
<div class='form-item'>
<label class='form-label'>Radios</label>
<div class='form-radios'>
<div class='form-type-radio'>
<input checked='checked' class='form-radio' id='one' name='radio' type='radio' value='one'>
<label class='option' for='one'>Option 1</label>
</div>
<div class='form-type-radio'>
<input class='form-radio' id='two' name='radio' type='radio' value='two'>
<label class='option' for='two'>Option 2</label>
</div>
</div>
</div>
<div class='form-item form-type-checkbox'>
<input checked='checked' class='form-checkbox' id='checkexample' type='checkbox'>
<label class='option' for='checkexample'>checkbox field that is checked by default</label>
</div>
<div class='form-item'>
<label class='form-label'>Select field</label>
<select class='form-select'>
<option value=''>Please select</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class='form-item'>
<label>Textarea</label>
<textarea rows="3" placeholder="Write your comment here..."> </textarea>
</div>
</div>
<div class='form-actions form-wrapper'>
<input class='button btn-primary' type='submit' value='Submit'>
<input class='button ' type='submit' value='Cancel'>
</div>
Adding the class .row alongside .form-wrapper display those forms inline-block with vertical align in the middle, and the classes .form-item inside display inline-table.
<div class='form-wrapper row'>
<div class='form-item'>
<label for='edit-text2'> input type text 1
<span class='form-required' title='This field is required.'>*</span>
</label>
<div class='form-description'> input description, comes before the input.</div>
<input class='form-text' id='edit-text2' type='text' value=''>
</div>
<div class='form-item'>
<label for='edit-text3'> input type text 2
<span class='form-required' title='This field is required.'>*</span>
</label>
<div class='form-description'> input description, comes before the input.</div>
<input class='form-text' id='edit-text3' type='text' value=''>
</div>
</div>
<div class='form-actions form-wrapper row'>
<input class='button btn-primary' type='submit' value='Submit'>
<input class='button' type='reset' value='Cancel'>
</div>
All inputs must be placed inside a .form-item and have the class .form-text. Placeholders are optional, and these may never replace labels.
<div class='form-item'>
<input type='text' class="form-text" placeholder="text input" value="" />
</div>
The date type is used for input fields that should contain a date. Currently only Chrome, Safari and Opera support this input type. For browsers that do not support the date input field, it will behave just like a text input. With Modernizr we detect the support for this feature and load the Date picker script.
An icon is placed inside the field to notify users they can select something.
<div class='form-item'>
<input type='date' class="form-text pickadate" placeholder="Pick a date" value="" />
</div>
Autocomplete fields need to be set from Drupal, because they need to be linked to a list of taxonomies and we use a Drupal module for this. In this demo you can see the styling for this component. On Greenwire the the suggestion list is updated on each keypress.
<div class='form-item'>
<label> Type anything to see the demo
<input type='text' class="form-text form-autocomplete" placeholder="text input" value="" />
<input type="hidden" id="example-autocomplete" value="#link-to-taxonomy-list" disabled="disabled" class="autocomplete">
</div>
Textarea must be placed inside a `.form-item`
<div class="form-item">
<textarea rows="3" placeholder="Write your comment here..."> </textarea>
</div>
<div class='form-item'>
<label class='form-label'>Radios</label>
<div class='form-radios'>
<div class='form-type-radio'>
<input checked='checked' class='form-radio' id='radio-one' name='radio' type='radio' value='one'>
<label class='option' for='radio-one'>Option 1</label>
</div>
<div class='form-type-radio'>
<input class='form-radio' id='radio-two' name='radio' type='radio' value='two'>
<label class='option' for='radio-two'>Option 2</label>
</div>
<div class='form-type-radio'>
<input class='form-radio' id='radio-three' name='radio' type='radio' value='three'>
<label class='option' for='radio-three'>Option 3</label>
</div>
</div>
</div>
<div class='form-item form-type-checkbox'>
<input checked='checked' class='form-checkbox' id='check1' type='checkbox'>
<label class='option' for='check1'>checkbox field that is checked by default</label>
</div>
<div class='form-item form-type-checkbox'>
<input class='form-checkbox' id='check2' type='checkbox'>
<label class='option' for='check2'>checkbox field that is not checked by default</label>
</div>
Textarea must be placed inside a `.form-item`
<div class="form-item form-type-select">
<label class="form-label">Select field</label>
<select class="form-select">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
For selects with autocomplete's we use the jQuery Chosen plugin. This function is often activated when the list of options is so long that it is more convenient for a user to start typing and give a suggestion of options that match their search.
<div class="form-item form-type-select">
<label class="form-label">Select field</label>
<select class="chosen-select">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
For multiselects we use the jQuery Chosen plugin by default. You need to give the select element the class .chosen-select to activate. The styling of the options should match the small buttons
<div class='form-item form-type-select'>
<label class='form-label'>Select field</label>
<select class='chosen-select' data-placeholder='Choose a Country...' multiple='multiple'>
<option value=''></option>
<option value='Belgium'>Belgium</option>
<option value='France'>France</option>
<option value='India'>India</option>
<option value='International'>International</option>
<option value='Nederland'>Nederland</option>
<option value='Nordic'>Nordic</option>
<option value='Russia'>Russia</option>
<option value='Thailand'>Thailand</option>
<option value='USA'>USA</option>
<option value='United Kingdom'>United Kingdom</option>
</select>
</div>
An example of each form element when a user has not filled in the form with valid data.
The form element wrapper will get a .has-error by default to indicate in which field the user has made a mistake.
<div class='form-wrapper'>
<div class='form-item'>
<label class='form-label' for='edit-name'>
Text input
<span class='form-required' title='This field is required.'>*</span>
</label>
<div class='form-description'>This is a description.</div>
<input class='form-text error' type='text' placeholder='type your input here' />
</div>
<div class='form-item'>
<label class='form-label' for='edit-password'>
Password
<span class='form-required' title='This field is required.'>*</span>
</label>
<input class='form-text error' type='password' placeholder='type your input here' />
</div>
<div class='form-item'>
<label class='form-label'>Radios</label>
<div class='form-radios'>
<div class='form-type-radio'>
<input checked='checked' class='form-radio error' id='one' name='radio' type='radio' value='one'>
<label class='option' for='one'>Option 1</label>
</div>
<div class='form-type-radio'>
<input class='form-radio error' id='two' name='radio' type='radio' value='two'>
<label class='option' for='two'>Option 2</label>
</div>
</div>
</div>
<div class='form-item form-type-checkbox'>
<input checked='checked' class='form-checkbox error' id='checkexample' type='checkbox'>
<label class='option' for='checkexample'>checkbox field that is checked by default</label>
</div>
<div class='form-item'>
<label class='form-label'>Select field</label>
<select class='form-select error'>
<option value=''>Please select</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class='form-item'>
<label>Textarea</label>
<textarea class="error" rows="3" placeholder="Write your comment here..."> </textarea>
</div>
</div>