Origami Frontend Components & Services

SassDoc: o-forms

oFormsGroup

Styles for the main o-forms/fieldset group which contains a label/input.

Links

oFormsGroupInline

Styles to modify the o-forms/fieldset group for inline fields.

Links

oFormsGroupInlineRadioCheckbox

Styles to modify the alignment of inline o-forms/fieldset group for checkboxes and radio buttons.

Links

oFormsGroupInlineContainer

Styles for the o-forms/fieldset inline container.

Links

oFormsGroupInlineControls

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

Links

oFormsCommonFieldBase

Basic styles shared between input, textarea, select etc.

Links

oFormsCommonFieldFocus

Shared focus state styles.

Links

oFormsCommonFieldDisabled

Shared disabled state styles.

Links

oFormsCommonFieldInvalid

Shared invalid state styles.

Links

oFormsCommonFieldValid

Shared valid state styles.

Links

oFormsCommonSmall

Shared styles to make an input smaller, e.g select or text.

Links

oFormsLabel

Styles for a label.

Links

oFormsAdditionalInfo

Styles for addional input information (typically below a label).

Links

oFormsErrorText

Styles for error text.

Links

oFormsLabelOptional

Modifying styles for labels of optional fields.

Links

oForms(class)

Styles for all form features.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsBaseFeatures(class)

Styles for basic form features including text, textarea, and select inputs along with labels and input error/validation styles.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioCheckboxFeatures(class)

Styles for basic grouped checkboxes and radios, with extra error/validation styles.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioCheckboxRightModifier(class)

Modifier styles to align checkbox/radio inputs to the right of their label.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsCheckboxToggleFeature(class)

Styles to append a suffix to an input. E.g. a button to the end of a text input.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioButtonsStyledFeature(class)

Styles for radios which look like a group of buttons, where one can be selected.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsSuffixFeature(class)

Styles to append a suffix to an input. E.g. a button to the end of a text input.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsInlineFeature(class)

Styles to support inline forms, with labels/messaging to one side and inputs to the other.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsStatusFeature(class)

Styles for form status such as "saving" and "saved".

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsWideFeature(class)

Modifying styles to make form inputs and any wrapping sections wide (removes max-width).

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsBleedFeature(class)

Modifying styles to make form inputs and any wrapping sections bleed (removes max-width and padding).

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsSmallFeature(class)

Modifying styles to make text and select inputs smaller.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsSectionFeature(class)

Wrapping styles to highlight sections of a form including section messages.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsUnskinFeature(class)

Overriding styles to remove input style whilst keeping its structure intact.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadio(class)

Styles for radio inputs.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsCheckbox(class)

Styles for checkbox inputs.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioCheckbox(class)

Draws a fake control (radio or checkbox) using pseudo-elements.

Shared styles of radio and checkbox inputs, including label changes.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioCheckboxRight(class)

Styles to position radio/checkbox inputs to the right of their label.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsGroupContainer(class)

Styles to wrap a group of checkboxes or a group of radios for purposes of positioning etc.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsRadioButtonsStyled(class)

Styles for radios which look like a group of buttons, where one can be selected.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsSection(class)

Styles to highlight sections of a form with multiple instances of o-forms, optionally with a global message for the wrapped inputs.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsMessage

Styles for a message which spans multiple o-forms instances.

Links

oFormsSelect

Styles for a select input.

Links

oFormsSelectSmall

Styles to support a small select input.

Links

oFormsSelectMulti

Styles for a multi select input.

Links

oFormsSuffix

Styles for an input suffix.

Links

oFormsAffixWrapper

Wrapping styles to support an input suffix. This could be built upon to support a prefix.

Links

oFormsTextarea

Styles for a text area.

Links

oFormsCheckboxToggle(class)

Styles for toggle interface which is backed by a checkbox input.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsCheckboxToggleInverse(class)

Styles for an inversed checkbox toggle.

parameter type default description
class The block level class name (BEM naming convention).

Links

oFormsUnskin

Style to unskin a text input field entirely, but keep its structure intact.

Links

o-forms-is-silent

Silent mode variable.

Links

o-forms-font-family

Field font family variable.

This is required to override default system form element styling, since <input>, <textarea>, <select>… don't inherit global font styles

Links

oForms(class)

Styles for all form features.

parameter type default description
class The block level class name (BEM naming convention).

Links

Switch component view

GitHub Repository

Install o-forms

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

If running a Manual Build, run bower install --save "o-forms@^5.7.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