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

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.

Radios with button styling


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



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

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.





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

Component information

Latest stable version:
5.2.1 (3 days, 17 hours old)
Status (Learn more):
Active (as of 5.1.1)
Bundle sizes:
11.27KB JavaScript 11.13KB CSS
This version
5.1.1 (10 days, 10 hours old)
Support status (Learn more):
Active (as of 5.1.1)
Last indexed
19 Feb 2018 13:11:20 (Build now)
o-colors ^4.0.0 OK 4.1.5
o-grid ^4.0.0 OK 4.3.8
o-icons >=4.0.0 <6 OK 5.6.0
o-normalise ^1.5.1 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