Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

Demos: o-forms

Text input

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

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.

Textarea

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

Radio buttons

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.

Anchors with radio button styling

Where technically required anchor tags may also be used, outside a form, to achieve the styled radio button look.

Checkboxes

These are the generic check boxes for most use cases.

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.

Sections

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

Inline

Form elements may also be displayed inline.

Inline Controls

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

Status

Feedback styles.

Status
active Origami v1 (Bower)
Switch component view

GitHub: o-forms

Install o-forms

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

If using the Bower package manager for a Manual Build, run bower install --save "o-forms@^5.8.2".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com