Origami Frontend Components & Services

Demos: o-forms

Professional theme

Professional theme

Professional inverse theme

Professional inverse theme

Inverse Form

Inverse form


Checkbox inputs with a default squared style

Date input

Date input with text fields instead of a date picker

Box-styled radio inputs

Radio button inputs with a box-like style

Round-styled radio inputs

Radio button inputs with a default circular style


Checkbox inputs with a toggle style

Text input

Regular text input

File input

Regular file input

Text Area

Regular textarea input

Select boxes

Dropdown/Selection inputs

Interactive form demo

Illustrates validation and state behaviour with form JS

Switch component view

GitHub: o-forms@9.10.0

Install o-forms

If using the Build Service, add o-forms@^9.10.0 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-forms@^9.10.0".

Help & Support

o-forms is maintained directly by the Origami team. If you have any questions about o-forms or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com