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 <Form> react component.

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> }; }