This version of this component hasn't been branded yet.

Please check the latest version, 5.7.2, as branding is a relatively new addition to our components.

o-forms

These components are used as the building blocks for creating all types of forms. These forms should be able to be used on all devices ie desktop, mobile and tablet.

active

Text input

<strong>Usercase:</strong> This is the generic text input box for most use cases to build any type of form.

<div class="o-forms">
	<label for="o-forms-standard" class="o-forms__label">Text input</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<input type="text" id="o-forms-standard" placeholder="placeholder" class="o-forms__text" required>
</div>
<div class="o-forms o-forms--valid">
	<label for="o-forms-valid" class="o-forms__label">Text input with valid entry</label>
	<input type="text" placeholder="placeholder" id="o-forms-valid" class="o-forms__text o-forms__text--valid" value="Field value">
</div>
<div class="o-forms o-forms--error">
	<label for="o-forms-invalid" class="o-forms__label">URL input :invalid</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<input type="url" placeholder="placeholder" id="o-forms-invalid" class="o-forms__text" value="hp://invalid.com">
	<div class="o-forms__errortext">Please enter a valid url</div>
</div>
<div class="o-forms">
	<label for="o-forms-disabled" class="o-forms__label">Text input disabled</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<input type="text" placeholder="placeholder" id="o-forms-disabled" class="o-forms__text o-forms__text--valid" value="Field value" disabled="disabled">
</div>

<div class="o-forms o-forms--wide">
	<label for="o-forms-full" class="o-forms__label">Text input full width</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<input type="text" placeholder="placeholder" id="o-forms-full" class="o-forms__text o-forms__text--valid" value="Field value">
</div>

<div class="o-forms">
	<label for="o-forms-text-small" class="o-forms__label">Text input</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<input type="text" id="o-forms-text-small" placeholder="placeholder" class="o-forms__text o-forms__text--small">
</div>

Select box

<strong>Usercase:</strong> This is the generic select box for most use cases that can be used to build any type of form on all devices.

<div class="o-forms">
	<label for="o-forms__select-standard" class="o-forms__label">Select box</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<select id="o-forms__select-standard" class="o-forms__select">
		<option value="option1" selected>Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
</div>
<div class="o-forms o-forms--valid">
	<label for="o-forms__select-valid" class="o-forms__label">Select box (valid)</label>
	<select id="o-forms__select-valid" class="o-forms__select">
		<option value="option1" selected>Option 1 (low chars: jpqy)</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
</div>
<div class="o-forms o-forms--error">
	<label for="o-forms__select-invalid" class="o-forms__label">Select box (error)</label>
	<select id="o-forms__select-invalid" class="o-forms__select">
		<option value="option1" selected>Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
	<div class="o-forms__errortext">Invalid entry</div>
</div>
<div class="o-forms">
	<label for="o-forms__select-disabled" class="o-forms__label">Select box disabled</label>
	<select id="o-forms__select-disabled" class="o-forms__select" disabled="disabled">
		<option value="option1" selected>Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
</div>

<div class="o-forms">
	<label for="o-forms-multi-select" class="o-forms__label">Multi-select Select box</label>
	<select id="o-forms-multi-select" multiple class="o-forms__select">
		<option value="option1" selected>Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
</div>

<div class="o-forms">
	<label for="o-forms__select-small" class="o-forms__label">Select box</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<select id="o-forms__select-small" class="o-forms__select o-forms__select--small">
		<option value="option1" selected>Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
		<option value="option4">Option 4</option>
	</select>
</div>

Textarea

<strong>Usercase:</strong> This is the generic text area box for most use cases.

<div class="o-forms">
	<label for="o-forms__textarea" class="o-forms__label">Textarea</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<textarea placeholder="Placeholder" id="o-forms__textarea" class="o-forms__textarea"></textarea>
</div>
<div class="o-forms o-forms--error">
	<label for="o-forms__textarea-invalid" class="o-forms__label">Textarea (error)</label>
	<textarea placeholder="Placeholder" id="o-forms__textarea-invalid" class="o-forms__textarea"></textarea>
	<div class="o-forms__errortext">Invalid entry</div>
</div>
<div class="o-forms">
	<label for="o-forms__textarea-disabled" class="o-forms__label">Textarea disabled</label>
	<textarea placeholder="Placeholder" id="o-forms__textarea-disabled" class="o-forms__textarea" disabled="disabled"></textarea>
</div>

<div class="o-forms o-forms--wide">
	<label for="o-forms__textarea" class="o-forms__label">Textarea (wide)</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<textarea placeholder="Placeholder" id="o-forms__textarea" class="o-forms__textarea"></textarea>
</div>

Radio buttons

<strong>Usercase:</strong> These are the generic radio buttons for most use cases.

<div class="o-forms">
	<label class="o-forms__label">Default radio controls</label>
	<input type="radio" name="radio" value="1" class="o-forms__radio" id="radio11" checked="checked">
	<label for="radio11" class="o-forms__label">Radio 1</label>
	<input type="radio" name="radio" value="2" class="o-forms__radio" id="radio12">
	<label for="radio12" class="o-forms__label">Radio 2</label>
</div>

<div class="o-forms o-forms--error">
	<label class="o-forms__label">Error</label>
	<input type="radio" name="radio3" value="1" class="o-forms__radio" id="radio31" checked="checked">
	<label for="radio31" class="o-forms__label">Radio 1</label>
	<input type="radio" name="radio3" value="2" class="o-forms__radio" id="radio32">
	<label for="radio32" class="o-forms__label">Radio 2</label>
	<div class="o-forms__errortext">Invalid entry</div>
</div>

<div class="o-forms">
	<label class="o-forms__label">Disabled</label>
	<input type="radio" name="radio2" value="1" class="o-forms__radio" id="radio21" disabled="disabled">
	<label for="radio21" class="o-forms__label">Radio 1</label>
	<input type="radio" name="radio2" value="2" class="o-forms__radio" id="radio22" disabled="disabled">
	<label for="radio22" class="o-forms__label">Radio 2</label>
</div>

Checkboxes

<strong>Usercase:</strong> These are the generic check boxes for most use cases.

<fieldset class="o-forms">
	<legend class="o-forms__label">Default checkboxes</legend>
	<input type="checkbox" name="checkbox" value="1" class="o-forms__checkbox" id="checkbox11" checked="checked">
	<label for="checkbox11" class="o-forms__label">Checkbox 1</label>
	<input type="checkbox" name="checkbox" value="2" class="o-forms__checkbox" id="checkbox12">
	<label for="checkbox12" class="o-forms__label">Checkbox 2</label>
</fieldset>
<fieldset class="o-forms o-forms--error">
	<legend class="o-forms__label">Error</legend>
	<input type="checkbox" name="checkbox3" value="1" class="o-forms__checkbox" id="checkbox31" checked="checked">
	<label for="checkbox31" class="o-forms__label">Checkbox 1</label>
	<input type="checkbox" name="checkbox3" value="2" class="o-forms__checkbox" id="checkbox32">
	<label for="checkbox32" class="o-forms__label">Checkbox 2</label>
	<div class="o-forms__errortext">Invalid entry</div>
</fieldset>
<div class="o-forms">
	<label class="o-forms__label">Disabled</label>
	<input type="checkbox" name="checkbox2" value="1" class="o-forms__checkbox" id="checkbox21" checked="checked" disabled="disabled">
	<label for="checkbox21" class="o-forms__label">Checkbox 1</label>
	<input type="checkbox" name="checkbox2" value="2" class="o-forms__checkbox" id="checkbox22" disabled="disabled">
	<label for="checkbox22" class="o-forms__label">Checkbox 2</label>
</div>

Checkboxes with long text

<strong>Usercase:</strong> This is for a check box with longer copy. NB Width should not extend text input box components.

<fieldset class="o-forms">
	<legend class="o-forms__label">Checkbox with long text</legend>
	<input type="checkbox" name="checkbox51" value="1" class="o-forms__checkbox" id="checkbox51" checked="checked">
	<label for="checkbox51" class="o-forms__label"><p>I confirm I have read and agree to the terms &amp; conditions, privacy policy and cookie policy*.</p></label>
</fieldset>

<fieldset class="o-forms o-forms--wide">
	<legend class="o-forms__label">Checkbox with long text (wide)</legend>
	<input type="checkbox" name="checkbox52" value="1" class="o-forms__checkbox" id="checkbox52" checked="checked">
	<label for="checkbox52" class="o-forms__label"><p>I confirm I have read and agree to the terms &amp; conditions, privacy policy and cookie policy*.</p></label>
</fieldset>

Prefix-suffix

<div class="o-forms">
	<label class="o-forms__label">Text input with prefix label</label>
	<small class="o-forms__additional-info">Optional prompt text goes here</small>
	<div class="o-forms__affix-wrapper">
		<span class="o-forms__prefix">http://</span>
		<input type="text" placeholder="placeholder" class="o-forms__text">
	</div>
</div>
<div class="o-forms">
	<label class="o-forms__label">Text input with suffix label</label>
	<div class="o-forms__affix-wrapper">
		<input type="text" placeholder="placeholder" class="o-forms__text o-forms__text--suffixed">
		<span class="o-forms__suffix">.com</span>
	</div>
</div>

<div class="o-forms">
	<label class="o-forms__label">Text input with suffix checkbox</label>
	<div class="o-forms__affix-wrapper">
		<input type="text" placeholder="placeholder" class="o-forms__text o-forms__text--suffixed">
		<div class="o-forms__suffix">
			<input type="checkbox" name="checkbox" value="2" class="o-forms__checkbox" id="checkbox12">
			<label for="checkbox12" class="o-forms__label">Checkbox 2</label>
		</div>
	</div>
</div>

<div class="o-forms o-forms--error">
	<label class="o-forms__label">Text input with prefix label (error)</label>
	<div class="o-forms__affix-wrapper">
		<span class="o-forms__prefix">http://</span>
		<input type="text" placeholder="placeholder" class="o-forms__text">
	</div>
	<div class="o-forms__errortext">Invalid entry</div>
</div>
<div class="o-forms">
	<label class="o-forms__label">Select box with prefix label</label>
	<div class="o-forms__affix-wrapper">
		<span class="o-forms__prefix">Choose:</span>
		<select class="o-forms__select">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
			<option value="option4">Option 4</option>
		</select>
	</div>
</div>

<div class="o-forms">
	<label class="o-forms__label">Text input with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<input type="text" placeholder="placeholder" class="o-forms__text">
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons">Go</button>
		</div>
	</div>
</div>
<div class="o-forms">
	<label class="o-forms__label">Text input with prefix button</label>
	<div class="o-forms__affix-wrapper">
		<div class="o-forms__prefix">
			<button type="button" class="o-buttons">Go</button>
		</div>
		<input type="text" placeholder="placeholder" class="o-forms__text">
	</div>
</div>
<div class="o-forms">
	<label class="o-forms__label">Select box with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<select class="o-forms__select">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
			<option value="option4">Option 4</option>
		</select>
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons">Go</button>
		</div>
	</div>
</div>
<div class="o-forms">
	<label class="o-forms__label">Text input with prefix label and suffix button</label>
	<div class="o-forms__affix-wrapper">
		<span class="o-forms__prefix">http://</span>
		<input type="text" placeholder="placeholder" class="o-forms__text">
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons">Go</button>
		</div>
	</div>
</div>

<div class="o-forms o-forms--wide">
	<label class="o-forms__label">Text input with prefix label and suffix button (wide)</label>
	<div class="o-forms__affix-wrapper">
		<span class="o-forms__prefix">http://</span>
		<input type="text" placeholder="placeholder" class="o-forms__text">
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons">Go</button>
		</div>
	</div>
</div>

Global messages

<strong>Usercase:</strong> These are generic global messages for most use cases.

<div class="o-forms__message">
	<p>This is a global message</p>
</div>
<div class="o-forms">
	<label class="o-forms__label">Field label</label>
	<small class="o-forms__additional-info">Additional field information</small>
	<input type="text" placeholder="placeholder" class="o-forms__text">
</div>

<div class="o-forms__message o-forms__message--error">
	<p>This is a global error message</p>
</div>
<div class="o-forms">
	<label class="o-forms__label">Field label</label>
	<small class="o-forms__additional-info">Additional field information</small>
	<input type="text" placeholder="placeholder" class="o-forms__text">
</div>

<div class="o-forms__message o-forms__message--wide o-forms__message--error">
	<p>This is a global error message (wide)</p>
</div>
<div class="o-forms o-forms--wide">
	<label class="o-forms__label">Field label</label>
	<small class="o-forms__additional-info">Additional field information</small>
	<input type="text" placeholder="placeholder" class="o-forms__text">
</div>

Wrappers

<strong>Usercase:</strong> These are generic wrappers for most use cases.

<div class="o-forms__wrapper o-forms__wrapper--highlight">
	<fieldset class="o-forms">
		<legend for="o-text-default" class="o-forms__label">Legend</legend>
		<small class="o-forms__additional-info">Additional field information</small>
		<input type="text" placeholder="placeholder" id="o-text-default" class="o-forms__text">
	</fieldset>
</div>
<div class="o-forms__wrapper o-forms__wrapper--error">
	<div class="o-forms__message o-forms__message--error">
		<p>This is a section error message</p>
	</div>
	<div class="o-forms o-forms--error">
		<label for="o-text-error" class="o-forms__label">Field label</label>
		<small class="o-forms__additional-info">Additional field information</small>
		<input type="text" placeholder="placeholder" id="o-text-error" class="o-forms__text">
	</div>
</div>


<div class="o-forms__wrapper o-forms__wrapper--wide o-forms__wrapper--error">
	<div class="o-forms__message o-forms__message--wide o-forms__message--error">
		<p>This is a section error message (wide</p>
	</div>
	<div class="o-forms o-forms--wide">
		<label for="o-text-wide" class="o-forms__label">Field label</label>
		<small class="o-forms__additional-info">Additional field information</small>
		<input type="text" placeholder="placeholder" id="o-text-wide" class="o-forms__text">
	</div>
</div>
Bower Dependencies
o-colors ^4.0.0
o-grid ^4.0.0
o-normalise ^1.2.0
o-typography ^5.0.1
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-forms@^4.0.4

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-forms"@"^4.0.4"

For more information see the Origami build process.