@financial-times/editorial-o-forms v1.0.7

@financial-times/editorial-o-forms

Forms consist of many different container and input elements, so the Origami React component version wraps the many o-forms (v8 as at Feb 2020) elements in a React friendly way.

The React structure of forms mirrors the markup of o-forms:

• FormsField - the field container (.o-forms-field)
• FormsTitle - the title container (.o-forms-title)
• FormsInput - the input container (.o-forms-input) with type prop to specify what type of input it is

To simplify usage, there are also higher level React components and helper props:

• [InputName]Input components create a FormsInput container that wraps the corresponding HTML input element eg, TextInput has a FormsInput of type text which wraps the text input element
• [InputName]Field components create a FormsField container with the corresponding input component eg, TextField creates a FormsField that wraps a TextInput
• FormsField and [InputName]Field components have title, titlePrompt and titleModifiers props that can be used to generate a FormsTitle within the field container
• Field modifiers and input modifiers can be passed into their respective fields and inputs
• Form component is available as a convenience for wrapping form elements, however no o-forms styles are applied to it

Usage

The simplest way to use form elements is to find the relevant [InputName]Field component eg,

<TextField title="Simple text field" titlePrompt="Small text"
titleModifiers={['shrink']} className="textFormField"
formsFieldModifiers={['inline', 'optional']} />

FormsField can also be used with title* props and include the [InputName]Input component eg,

<FormsField
	className="textFormField"
	title="Mid text forms field"
	titlePrompt="Small text"
	titleModifiers={['shrink']}
	modifiers={['inline', 'optional']}
>
	<TextInput className="someText" />
</FormsField>

FormsTitle can also be explicitly included eg,

<FormsField
	className="textFormField"
	modifiers={['inline', 'optional']}
>
	<FormsTitle
		title="Full text forms field"
		prompt="Small text"
		modifiers={['shrink']}
	/>
	<TextInput className="someText" />
</FormsField>

Example: Radio buttons

import { FormsField, RadioInput } from '@financial-times/editorial-o-forms';

<FormsField title="Background">
	<RadioInput
		type="radio-box"
		options={[
			{ name: 'white', value: WHITE },
			{ name: 'pink', value: FT_PINK },
			{ name: 'dark', value: DARK },
		]}
		onClick={this.setBackground}
	/>
</FormsField>

Error messages

The FormsInput component uses its displayError and isError props to display an error message under child components.

To do this with the SelectField and TextField components, pass in required and errorMessage props. The pattern prop of the TextField component takes a regex which can be used to set a custom error.