Forms

Forms on websites are critical and often the main piece of user interactivity, so forms in SocialStack are intended to be as flexible as possible, without reinventing too much.

The <Form> React component is a very thin wrapper over <form> in order to add some common conveniences, such as using the submitForm function instead of the default browser page load form submit.

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
onValues	This callback function can be used to manipulate what is actually sent to the server. It is given the complete set of field values, and you must return the values that you would like to submit. Typically this is just by returning the object you were given, after adding/ changing fields on it.	No	none
successMessage	A JSX supporting message which will appear in a success alert when a 200 response is received. A common convenience piece.	No	none
failureMessage	A JSX supporting message which will appear in an error alert when a non 2xx response is received. A common convenience piece.	No	none
action	The URL where the form will be submitted. By default this is API relative, meaning action="user" is going to POST to /v1/user	Yes	none
submitLabel	If specified, an <Input type='submit' /> will be added at the end of the form with the given text on it. Also a common convenience.	No	none
onSuccess	A callback which runs with the response, typically from the API.	No	none
onFailed	A callback which runs with a failure message. This is often from the API, but can be client generated when the failure is down to the a timeout.	No	none

Submitting a form

There are two ways of submitting a form. Either:

• Add any <input type='submit' /> button
• Obtain a reference to the dom <form> element and call .submit(); on it