Input

<Input> is a React component which is primarily a convenience wrapper for <input>. Using it is not required for <Form> - you can mix and match regular <input> fields inside a form and they will still be submitted.

Form example

import Form from 'UI/Form';
import Input from 'UI/Input';

...

<Form action="user" submitLabel="Create a user" successMessage="User created!" failureMessage="Unable to create a user now">
        <Input type="text" name="email" label="Email Address" validate={["Required"]} />
        <Input type="password" name="password" label="Email Address" />
</Form>

Props

This is the main available props for the <Input> react component.

(todo!)

Name	About	Required?	Default value
validate	It's an array of validators. See the section about validation below.	No	none

Validation

The validate prop can be used to provide an array of validators. Each one is either a string or a function. If you provide a string, it will be treated as the name of a module under UI/Functions/Validation. Let's take the example above:

   <Input type="text" name="email" label="Email Address" validate={["Required"]} />

This string validator, "Required", will be a function imported from UI/Functions/Validation/Required.

The validator functions themselves are relatively simple - they are given the input fields value as their input, and do nothing if the input was valid. Otherwise, they return an error with a visual version as well as a textual error code. Here is the source of Required itself:

export default value => {
	if(!value || (value.trim && value.trim() == '')){
		return {
			error: 'EMPTY',
			ui: <Text>
				{`This field is required`}
			</Text>
		};
	}
}