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.

Form rules:

Labels - Always label the form component ie a text input, select box to help the user understand it’s meaning.

Order the components logically - Reflect the natural flow of a conversation. For example would you ask for someones bank details before you asked for their name?

Group related information - For example Personal Details, and Payment Details.

Never need to explain - If it’s too complicated for the user to fill out then you will need to rethink it.

Error message - Notify the user as soon as an error has occured.
Validation message - Only valid at key points so as not to frustrate the user.

Form layout:

Columns - Forms fields should only ever consist of a single column.

Column alignment - Mobile keep centred with minimum 5px border. Desktop and Tablet keep centred with the page.

Form fields - these shouldn’t extend 400 px on Desktop and Tablet.

View on GitHub

Quick start

Using the build service

Add the following token to your script and link tags (how do I do that?):


For more information see the Origami build service.

Using a 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.1.3"

For more information see the Origami build process.

Text input


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

Select box


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



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

Radio buttons


Usercase: These are the generic radio buttons for most use cases.



Usercase: These are the generic check boxes for most use cases.

Checkboxes with long text


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

A checkbox which acts as a toggle


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



Global messages


Usercase: These are generic global messages for most use cases.



Usercase: These are generic wrappers for most use cases.

Component information

Latest stable version:
5.2.1 (3 days, 16 hours old)
Status (Learn more):
Active (as of 4.1.3)
Bundle sizes:
10.67KB JavaScript 12.33KB CSS
This version
4.1.3 (4 months, 13 days old)
Support status (Learn more):
Active (as of 4.1.3)
Last indexed
11 Feb 2018 18:06:00 (Build now)
o-colors ^4.0.0 OK 4.1.5
o-grid ^4.0.0 OK 4.3.8
o-normalise ^1.2.0 OK 1.6.0
o-typography ^5.0.1 OK 5.5.0


To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue