Origami Frontend Components & Services

Readme: o-ft-forms

o-ft-forms has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

This module is now deprecated, please use o-forms instead.


Overview

This module provides FT-branded styles for commonly used form elements and their corresponding validation states.


Browser Support

This module is currently supported on IE8+ and modern browsers (Chrome, Firefox, Safari etc) version -1. It is also supported on i0S6+ and Chrome for Android > 4.3.0.

Known issues:


Usage

Basic form field structure

Each form field is made up of at least 3 elements:

Example HTML:

<div class="o-ft-forms__field-group">
    <label class="o-ft-forms__label">Text input disabled</label>
    <input type="text" placeholder="placeholder" class="o-ft-forms__field">
</div>

All the standard form elements follow this basic structure, with some variation as defined below.

Selects

Using the basic structure defined above, selects are styled by applying .o-ft-forms__field--select on the select element itself.

Textareas

Textareas are styled by applying .o-ft-forms__field--textarea to the textarea element itself.

###Checkboxes and radio buttons

In order for checkboxes and radio buttons to be styled correctly, their type attribute must be set.

Example HTML:

 <input type="radio"  class="o-ft-forms__field" />

###Validation states

Validation styles are applied by adding .o-ft-forms--error or .o-ft-forms--valid to the field's containing element. Child .o-ft-forms__label and .o-ft-forms__field elements will be styled appropriately.

An error message, defined with .o-ft-forms__errortext, can be appended to the containing element.

Example HTML:

<div class="o-ft-forms__field-group o-ft-forms--error">
    <label class="o-ft-forms__label">Text input disabled</label>
    <input type="text" placeholder="placeholder" class="o-ft-forms__field" />
    <div class="o-ft-forms__errortext">Please enter a valid url</div>
</div>

Section/group validation

For use-cases where validation rules need to be applied to a group of fields rather than just one field, all relevant fields should be wrapped in a block-level element defined with a class of .o-ft-forms__section. Validation styles can then be added to this element with the .o-ft-forms__section--error modifier class.

An error message can be prepended to the element, defined by a class of .o-ft-forms-section__message--error.

Example HTML:

<fieldset class="o-ft-forms__section o-ft-forms__section--error">
    <div class="o-ft-forms-section__message--error">
         <p>This is a section error message that highlights a group of fields</p>
    </div>
    <div class="o-ft-forms__field-group"></div>
</fieldset>

Global validation

A global error message element exists for generic validation feedback and is defined with .o-ft-forms__global-message--error.

Prefixes and suffixes

Prefixes and suffixes are used for prepending or appending static text to a form control. The form control should be wrapped in a block-level element with a class of .o-ft-forms__affix-wrapper. Prefixes (defined by .o-ft-forms__prefix) and suffixes (defined by .o-ft-forms__suffix) can then be prepended/appended to this wrapper element.

Example HTML:

<div class="o-ft-forms__field-group">
    <label class="o-ft-forms__label">Text input with suffix label</label>
    <div class="o-ft-forms__affix-wrapper">
        <input type="text" class="o-ft-forms__field" value="" />
        <span class="o-ft-forms__suffix">.com</span>
    </div>
</div>

Silent mode

All of the above can be used in silent mode by extending your own class using their placeholder equivalents:

.my-own-form-element {
    @extend %o-ft-forms__field-group;
    // custom styles
}
Status
dead Origami v1 (Bower)
Switch component view

GitHub: o-ft-forms

Install o-ft-forms

If using the Build Service, add o-ft-forms@^0.13.5 to your link tag.

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

Help & Support

o-ft-forms is maintained directly by the Origami team. If you have any questions about o-ft-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