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

This is the generic text input box for most use cases to build any type of form.

<div class="o-forms">
	<label aria-describedby="text-box-info" for="o-forms-standard" class="o-forms__label">Text input</label>
	<div id="text-box-info" class="o-forms__additional-info">Prompt text follows the label if required..</div>
	<input type="text" id="o-forms-standard" class="o-forms__text" required>
</div>

<div class="o-forms">
	<label for="o-forms-optional" class="o-forms__label o-forms__label--optional">Optional text input</label>
	<input type="text" id="o-forms-optional" class="o-forms__text">
</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" 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>
	<input type="url" 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>
	<input type="text" 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>
	<input type="text" id="o-forms-full" class="o-forms__text o-forms__text--valid" value="Field value">
</div>

<div class="o-forms">
	<label for="o-forms-small" class="o-forms__label">Text input small</label>
	<input type="text" id="o-forms-small" class="o-forms__text o-forms__text--small">
</div>

Select box

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 aria-describedby="select-box-info" for="select-standard" class="o-forms__label">Select box</label>
	<div id="select-box-info" class="o-forms__additional-info">Prompt text follows the label if required.</div>
	<select id="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="select-valid" class="o-forms__label">Select box (valid)</label>
	<select id="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="select-invalid" class="o-forms__label">Select box (error)</label>
	<select id="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="select-disabled" class="o-forms__label">Select box disabled</label>
	<select id="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="select-multi" class="o-forms__label">Multi-select Select box</label>
	<select id="select-multi" 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="select-small" class="o-forms__label"> Select box</label>
	<select id="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

This is the generic text area box for most use cases.

<div class="o-forms">
	<label aria-describedby="textarea-info" for="o-forms__textarea" class="o-forms__label">Textarea</label>
	<div id="textarea-info" class="o-forms__additional-info">Prompt text follows the label if required.</div>
	<textarea id="o-forms__textarea" class="o-forms__textarea"></textarea>
</div>

<div class="o-forms">
	<label for="o-forms__textarea-optional" class="o-forms__label o-forms__label--optional">Optional textarea</label>
	<textarea id="o-forms__textarea-optional" 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 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 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-wide" class="o-forms__label">Textarea (wide)</label>
	<textarea id="o-forms__textarea-wide" class="o-forms__textarea"></textarea>
</div>

Radio buttons

These are the generic radio buttons for most use cases.

<fieldset class="o-forms">
	<legend aria-describedby="default-radio-info" class="o-forms__label">Default radio controls</legend>
	<div id="default-radio-info" class="o-forms__additional-info">Prompt text follows the legend if required.</div>
	<div class="o-forms__group">
		<input type="radio" name="radio-a" 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-a" value="2" class="o-forms__radio" id="radio12">
		<label for="radio12" class="o-forms__label">Radio 2</label>
	</div>
</fieldset>

<fieldset class="o-forms">
	<legend class="o-forms__label">Radio controls inline</legend>
	<div class="o-forms__group o-forms__group--inline">
		<input type="radio" name="radio-b" value="1" class="o-forms__radio" id="radio41" checked="checked">
		<label for="radio41" class="o-forms__label">Radio 1</label>
		<input type="radio" name="radio-b" value="2" class="o-forms__radio" id="radio42">
		<label for="radio42" class="o-forms__label">Radio 2</label>
	</div>
</fieldset>

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

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

Radios with button styling

<strong>Usercase:</strong> Can be used to require the user to choose between alternatives, with no default set.

<fieldset class="o-forms">
    <legend class="o-forms__label">No default selection</legend>
    <div class="o-forms__group o-forms__group--inline-together">
        <input type="radio" name="radio4" value="daily" class="o-forms__radio-button" id="radio41">
        <label for="radio41" class="o-forms__label">Daily</label>
        <input type="radio" name="radio4" value="weekly" class="o-forms__radio-button" id="radio42">
        <label for="radio42" class="o-forms__label">Weekly</label>
    </div>
</fieldset>

<fieldset class="o-forms">
	<legend class="o-forms__label">Positive / negative choice with a default selection</legend>
	<div class="o-forms__group o-forms__group--inline-together">
		<input type="radio" name="radio8" value="yes" class="o-forms__radio-button" id="radio81">
		<label for="radio81" class="o-forms__label">Yes</label>
		<input type="radio" name="radio8" value="no" class="o-forms__radio-button o-forms__radio-button--negative" id="radio82" checked>
		<label for="radio82" class="o-forms__label">No</label>
	</div>
</fieldset>

<fieldset class="o-forms">
    <legend class="o-forms__label">Default selected</legend>
    <div class="o-forms__group o-forms__group--inline-together">
        <input type="radio" name="radio5" value="daily" class="o-forms__radio-button" id="radio51" checked="checked">
        <label for="radio51" class="o-forms__label">Daily</label>
        <input type="radio" name="radio5" value="weekly" class="o-forms__radio-button" id="radio52">
        <label for="radio52" class="o-forms__label">Weekly</label>
        <input type="radio" name="radio5" value="monthly" class="o-forms__radio-button" id="radio53">
        <label for="radio53" class="o-forms__label">Monthly</label>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--error">
    <legend class="o-forms__label">Error</legend>
    <div class="o-forms__group o-forms__group--inline-together">
        <input type="radio" name="radio6" value="yes" class="o-forms__radio-button" id="radio61">
        <label for="radio61" class="o-forms__label">Yes</label>
        <input type="radio" name="radio6" value="no" class="o-forms__radio-button" id="radio62">
        <label for="radio62" class="o-forms__label">No</label>
    </div>
    <div class="o-forms__errortext">We were unable to update your preference, please try again.</div>
</fieldset>

<fieldset class="o-forms">
    <legend class="o-forms__label">Disabled</legend>
    <div class="o-forms__group o-forms__group--inline-together">
        <input type="radio" name="radio7" value="yes" class="o-forms__radio-button" id="radio71" disabled="disabled">
        <label for="radio71" class="o-forms__label">Yes</label>
        <input type="radio" name="radio7" value="no" class="o-forms__radio-button" id="radio72" disabled="disabled">
        <label for="radio72" class="o-forms__label">No</label>
    </div>
</fieldset>

Checkboxes

These are the generic check boxes for most use cases.

<div class="o-forms">
	<legend aria-describedby="default-checkboxes-info" class="o-forms__label">Default checkboxes</legend>
	<div id="default-checkboxes-info" class="o-forms__additional-info">Prompt text follows the ledgend if required.</div>
	<div class="o-forms__group">
		<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>
		<input type="checkbox" name="checkbox" value="3" class="o-forms__checkbox" id="checkbox13">
		<label for="checkbox13" class="o-forms__label">Checkbox 3</label>
	</div>
</div>

<fieldset class="o-forms">
	<legend class="o-forms__label">Inline checkboxes</legend>
	<div class="o-forms__group o-forms__group--inline">
		<input type="checkbox" name="checkbox" value="1" class="o-forms__checkbox" id="checkbox61" checked="checked">
		<label for="checkbox61" class="o-forms__label">Checkbox 1</label>
		<input type="checkbox" name="checkbox" value="2" class="o-forms__checkbox" id="checkbox62">
		<label for="checkbox62" class="o-forms__label">Checkbox 2</label>
		<input type="checkbox" name="checkbox" value="3" class="o-forms__checkbox" id="checkbox63">
		<label for="checkbox63" class="o-forms__label">Checkbox 3</label>
	</div>
</fieldset>

<div class="o-forms">
	<label aria-describedby="right-checkboxes-info" for="form-secret" class="o-forms__label">Right side control checkbox</label>
	<div id="right-checkboxes-info" class="o-forms__additional-info">Interface demo only, password hide/show functionality is not currently included in o-forms.</div>
	<input type="password" id="form-secret" class="o-forms__text" required>
	<div class="o-forms__group o-forms__group--inline">
		<input type="checkbox" name="checkbox" value="2" class="o-forms__checkbox o-forms__checkbox--right" id="controlCheckbox">
		<label for="controlCheckbox" class="o-forms__label">Show password</label>
	</div>
</div>

<fieldset class="o-forms o-forms--error">
	<legend class="o-forms__label">Error</legend>
	<div class="o-forms__group">
		<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>
	<div class="o-forms__errortext">Invalid entry</div>
</fieldset>

<fieldset class="o-forms">
	<legend class="o-forms__label">Disabled</legend>
	<div class="o-forms__group">
		<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>
</fieldset>

<fieldset class="o-forms">
	<legend class="o-forms__label">Checkbox with long text</legend>
		<div class="o-forms__group">
		<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>
			<p>We will send you occasional emails to improve your experience of the Financial Times.</p>
		</label>
		<input type="checkbox" name="checkbox52" value="1" class="o-forms__checkbox" id="checkbox52">
		<label for="checkbox52" class="o-forms__label">
			<p>By submitting this form, you indicate your consent to also being contacted by the Financial Times by email. post or phone about our other products, services or special offers unless you untick this box. You can change your preferences anytime in the My Account section.</p>
		</label>
	</div>
</fieldset>

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

A checkbox which acts as a toggle

This is a checkbox which looks like a toggle, useful as an on/off e.g. for settings.

<fieldset class="o-forms">
	<legend class="o-forms__label">Checkbox Toggle</legend>
	<div class="o-forms__group">
		<div class="o-forms__toggle">
			<input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle1">
			<label for="checkboxToggle1" class="o-forms__label">Checkbox Toggle 1</label>
		</div>
		<div class="o-forms__toggle">
			<input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle2" checked="checked">
			<label for="checkboxToggle2" class="o-forms__label">Checkbox Toggle 2</label>
		</div>
	</div>
	<div class="o-forms__group inverse-demo">
		<div class="o-forms__toggle o-forms__toggle--inverse">
			<input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle3">
			<label for="checkboxToggle3" class="o-forms__label">Checkbox Toggle 3 (Inverse)</label>
		</div>
		<div class="o-forms__toggle o-forms__toggle--inverse">
			<input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle4" checked="checked">
			<label for="checkboxToggle4" class="o-forms__label">Checkbox Toggle 4 (Inverse)</label>
		</div>
	</div>
</fieldset>

Suffix

<div class="o-forms">
	<label class="o-forms__label" for="text-suffix">Text input with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<input id="text-suffix" type="text" class="o-forms__text">
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons o-buttons--secondary o-buttons--big">Go</button>
		</div>
	</div>
</div>

<div class="o-forms">
	<label class="o-forms__label" for="select-suffix">Select box with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<select class="o-forms__select" id="select-suffix">
			<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 o-buttons--secondary o-buttons--big">Go</button>
		</div>
	</div>
</div>

<div class="o-forms">
	<label class="o-forms__label" for="small-text-suffix">Small text input with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<input id="small-text-suffix" type="text" class="o-forms__text o-forms__text--small">
		<div class="o-forms__suffix">
			<button type="button" class="o-buttons o-buttons--secondary">Go</button>
		</div>
	</div>
</div>

<div class="o-forms">
	<label class="o-forms__label" for="small-select-suffix">Small select box with suffix button</label>
	<div class="o-forms__affix-wrapper">
		<select id="small-select-suffix" class="o-forms__select o-forms__select--small">
			<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 o-buttons--secondary">Go</button>
		</div>
	</div>
</div>

Sections

These are optional section wrappers to highlight multiple instances of o-forms.

<div class="o-forms-section o-forms-section--highlight">
	<div class="o-forms">
		<label for="o-forms-section-highlight" class="o-forms__label">Field Label</label>
		<input type="text" id="o-forms-section-highlight" class="o-forms__text" required>
	</div>
</div>

<div class="o-forms-section">
	<div class="o-forms-section__message">
		<p>This is a section message.</p>
	</div>
	<div class="o-forms">
		<label for="o-forms-message" class="o-forms__label">Field Label</label>
		<input type="text" id="o-forms-message" class="o-forms__text" required>
	</div>
</div>

<div class="o-forms-section o-forms-section--wide">
	<div class="o-forms-section__message">
		<p>This is a section message (wide).</p>
	</div>
	<div class="o-forms">
		<label for="o-forms-message-wide" class="o-forms__label">Field Label</label>
		<input type="text" id="o-forms-message-wide" class="o-forms__text" required>
	</div>
</div>

<div class="o-forms-section o-forms-section--error">
	<div class="o-forms-section__message">
		<p>This is a section error message</p>
	</div>
	<div class="o-forms o-forms--error">
		<label for="o-forms-section-error" class="o-forms__label">Field Label</label>
		<input type="text" id="o-forms-section-error" class="o-forms__text" required>
		<div class="o-forms__errortext">Invalid entry</div>
	</div>
</div>

<div class="o-forms-section o-forms-section--error o-forms-section--wide">
	<div class="o-forms-section__message">
		<p>This is a section error message (wide)</p>
	</div>
	<div class="o-forms o-forms--error o-forms--wide">
		<label for="o-forms-section-error-wide" class="o-forms__label">Field Label</label>
		<input type="text" id="o-forms-section-error-wide" class="o-forms__text" required>
		<div class="o-forms__errortext">Invalid entry</div>
	</div>
</div>

Inline

Form elements may also be displayed inline.

<fieldset class="o-forms o-forms--inline">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">No default selection</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="radio4" value="daily" class="o-forms__radio-button" id="radio41">
            <label for="radio41" class="o-forms__label">Daily</label>
            <input type="radio" name="radio4" value="weekly" class="o-forms__radio-button" id="radio42">
            <label for="radio42" class="o-forms__label">Weekly</label>
        </div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">Positive / negative choice with a default selection</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="radio8" value="yes" class="o-forms__radio-button" id="radio81">
            <label for="radio81" class="o-forms__label">Yes</label>
            <input type="radio" name="radio8" value="no" class="o-forms__radio-button o-forms__radio-button--negative" id="radio82" checked>
            <label for="radio82" class="o-forms__label">No</label>
        </div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--checkboxes">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">Checkbox Toggle</legend>
        <div class="o-forms__group">
            <div class="o-forms__toggle">
                <input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle1">
                <label for="checkboxToggle1" class="o-forms__label">Checkbox Toggle 1</label>
            </div>
            <div class="o-forms__toggle">
                <input class="o-forms__toggle__checkbox" data-o-form-toggle="" type="checkbox" name="checkbox" value="1" id="checkboxToggle2" checked="checked">
                <label for="checkboxToggle2" class="o-forms__label">Checkbox Toggle 2</label>
            </div>
        </div>
    </div>
</fieldset>

<div class="o-forms o-forms--inline o-forms--checkboxes">
    <div class="o-forms__inline-item">
        <legend aria-describedby="default-checkboxes-info" class="o-forms__label">Default checkboxes</legend>
        <div id="default-checkboxes-info" class="o-forms__additional-info">Prompt text follows the ledgend if required.</div>
    </div>
    <div class="o-forms__group">
        <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>
        <input type="checkbox" name="checkbox" value="3" class="o-forms__checkbox" id="checkbox13">
        <label for="checkbox13" class="o-forms__label">Checkbox 3</label>
    </div>
</div>

<fieldset class="o-forms o-forms--inline o-forms--radios o-forms--error">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">Error</legend>
        <div class="o-forms__group">
            <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>
        <div class="o-forms__errortext">Invalid entry</div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--radios">
    <div class="o-forms__inline-container">
        <div class="o-forms__inline-item">
            <legend aria-describedby="default-radio-controls" class="o-forms__label">Default radio controls</legend>
            <div id="default-radio-controls" class="o-forms__additional-info">Prompt text follows the ledgend if required.</div>
        </div>
        <div class="o-forms__group">
            <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>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--radios o-forms--error">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">Error</legend>
        <div class="o-forms__group">
            <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>
        <div class="o-forms__errortext">Invalid entry</div>
    </div>
</fieldset>

<div class="o-forms o-forms--inline">
    <div class="o-forms__inline-item">
	    <label aria-describedby="select-box-info" for="select-standard" class="o-forms__label">Select box</label>
	    <div id="select-box-info" class="o-forms__additional-info">Prompt text follows the label if required.</div>
    </div>
	<select id="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--inline o-forms--error">
	<label for="select-invalid" class="o-forms__label">Select box (error)</label>
    <select id="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 o-forms--inline">
    <div class="o-forms__inline-item">
	    <label aria-describedby="text-input-info" for="o-forms-standard" class="o-forms__label">Text input</label>
	    <div id="text-input-info" class="o-forms__additional-info">Prompt text follows the label if required..</div>
    </div>
	<input type="text" id="o-forms-standard" class="o-forms__text" required>
</div>

<div class="o-forms o-forms--inline o-forms--error">
	<label for="o-forms-invalid" class="o-forms__label">URL input :invalid</label>
    <input type="url" 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 o-forms--inline">
    <div class="o-forms__inline-item o-forms__inline-item--long">
	    <label aria-describedby="long-label-content-info" for="o-forms-long" class="o-forms__label">A long label and additional content</label>
	    <div id="long-label-content-info" class="o-forms__additional-info">Inline inputs with long labels / additonal content have a unique class to align them to the start and span error messages.</div>
    </div>
	<input type="text" id="o-forms-long" class="o-forms__text" required>
</div>

<div class="o-forms o-forms--inline o-forms--error">
    <div class="o-forms__inline-item o-forms__inline-item--long">
	    <label aria-describedby="long-label-content-invalid-info" for="o-forms-invalid-long" class="o-forms__label">A long label and additional content</label>
	    <div id="long-label-content-invalid-info" class="o-forms__additional-info">Inline inputs with long labels / additonal content have a unique class to align them to the start and span error messages.</div>
    </div>
    <input type="url" id="o-forms-invalid-long" class="o-forms__text" value="hp://invalid.com">
    <div class="o-forms__errortext">Please enter a valid url</div>
</div>

<div class="o-forms o-forms--inline">
    <div class="o-forms__inline-item">
	    <label aria-describedby="textarea-info" for="o-forms__textarea" class="o-forms__label">Textarea</label>
	    <div id="textarea-info" class="o-forms__additional-info">Prompt text follows the label if required.</div>
    </div>
	<textarea id="o-forms__textarea" class="o-forms__textarea"></textarea>
</div>

<div class="o-forms o-forms--inline o-forms--error">
	<label for="o-forms__textarea-invalid" class="o-forms__label">Textarea (error)</label>
	<textarea id="o-forms__textarea-invalid" class="o-forms__textarea"></textarea>
    <div class="o-forms__errortext">Invalid entry</div>
</div>

Inline Controls

For small controls of the same width E.g. repeated yes/no radios in a small container.

<fieldset class="o-forms o-forms--inline-controls">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">Standard</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="radio1" value="yes" class="o-forms__radio-button" id="radio10">
            <label for="radio10" class="o-forms__label">Yes</label>
            <input type="radio" name="radio1" value="no" class="o-forms__radio-button" id="radio11">
            <label for="radio11" class="o-forms__label">No</label>
        </div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline-controls o-forms--error">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">With Error</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="radio2" value="daily" class="o-forms__radio-button" id="radio20">
            <label for="radio20" class="o-forms__label">Yes</label>
            <input type="radio" name="radio2" value="weekly" class="o-forms__radio-button" id="radio21">
            <label for="radio21" class="o-forms__label">No</label>
        </div>
        <div class="o-forms__errortext">Sorry there was a problem.</div>
    </div>
</fieldset>

Status

Feedback styles.

<fieldset class="o-forms o-forms--inline o-forms--saving" data-o-component="o-forms">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">inline saving status</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="saving" value="daily" class="o-forms__radio-button" id="radio-saving-1">
            <label for="radio-saving-1" class="o-forms__label">Daily</label>
            <input type="radio" name="saving" value="weekly" class="o-forms__radio-button" id="radio-saving-2">
            <label for="radio-saving-2" class="o-forms__label">Weekly</label>
        </div>
        <div class="o-forms__status o-forms__status--left" aria-hidden="false" aria-live="true"></div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--saved">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">inline saved status</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="saved" value="daily" class="o-forms__radio-button" id="radio-saved-1">
            <label for="radio-saved-1" class="o-forms__label">Daily</label>
            <input type="radio" name="saved" value="weekly" class="o-forms__radio-button" id="radio-saved-2">
            <label for="radio-saved-2" class="o-forms__label">Weekly</label>
        </div>
        <div class="o-forms__status o-forms__status--left" aria-hidden="false" aria-live="true"></div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--loading o-forms--saving" data-o-component="o-forms">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">icon only inline status</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="saving-icon" value="daily" class="o-forms__radio-button" id="radio-saving-icon-1">
            <label for="radio-saving-icon-1" class="o-forms__label">Daily</label>
            <input type="radio" name="saving-icon" value="weekly" class="o-forms__radio-button" id="radio-saving-icon-2">
            <label for="radio-saving-icon-2" class="o-forms__label">Weekly</label>
        </div>
        <div class="o-forms__status o-forms__status--left o-forms__status--icon-only" aria-hidden="false" aria-live="true"></div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--inline o-forms--saving">
    <div class="o-forms__inline-container">
        <legend class="o-forms__label">inline saving status (below)</legend>
        <div class="o-forms__group o-forms__group--inline-together">
            <input type="radio" name="below" value="daily" class="o-forms__radio-button" id="radio-status-below-1">
            <label for="radio-status-below-1" class="o-forms__label">Daily</label>
            <input type="radio" name="below" value="weekly" class="o-forms__radio-button" id="radio-status-below-2">
            <label for="radio-status-below-2" class="o-forms__label">Weekly</label>
        </div>
        <div class="o-forms__status" aria-hidden="false" aria-live="true"></div>
    </div>
</fieldset>

<fieldset class="o-forms o-forms--saving" data-o-component="o-forms">
    <legend class="o-forms__label">stacked saving status</legend>
    <div class="o-forms__group o-forms__group--inline-together">
        <input type="radio" name="saving-stacked" value="daily" class="o-forms__radio-button" id="radio-saving-stacked-1">
        <label for="radio-saving-stacked-1" class="o-forms__label">Daily</label>
        <input type="radio" name="saving-stacked" value="weekly" class="o-forms__radio-button" id="radio-saving-stacked-2">
        <label for="radio-saving-stacked-2" class="o-forms__label">Weekly</label>
    </div>
    <div class="o-forms__status o-forms__status--left" aria-hidden="false" aria-live="true"></div>
</fieldset>
Bower Dependencies
o-colors ^4.0.0
o-grid ^4.0.0
o-normalise ^1.5.1
o-typography ^5.0.1
o-icons >=4.0.0 <6
o-brand >=2.2.0 <4
o-loading ^2.2.1
GitHub Repository

Quickstart

Build Service

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

o-forms@^5.7.2

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"@"^5.7.2"

For more information see the Origami build process.