o-forms

CSS

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 link tag (how do I do that?):

o-forms@^3.5.0

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

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.

Textarea


			

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.

Checkboxes


			

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.

prefix-suffix


			

Global messages


			

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

Wrappers


			

Usercase: These are generic wrappers for most use cases.

Component information

Latest stable version:
3.5.0 (3 months, 23 days old)
Status (Learn more):
Active (as of 3.5.0)
Bundle sizes:
477b JavaScript 9.05KB CSS
This version
3.5.0 (3 months, 23 days old)
Support status (Learn more):
Active (as of 3.5.0)
Last indexed
23 May 2017 15:59:46 (Build now)
Installable?
OK
Dependencies
o-colors >=2.5.0 <4 Out of date 4.0.1
o-grid ^4.0.0 OK 4.3.1
o-normalise ^1.2.0 OK 1.2.1
Dependents
fthelp-wp-templatekmt-headern-email-articlen-myft-uin-nps-feedbackn-uio-author-alertso-email-only-signupo-headerwebchat

Contact

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

Origami