Form

With Gravity, you will never have to experience the pain of coding another HTML form again. Simply create an object with the form fields you need and pass it to the form component.

Your form will be automatically rendered and will perform its own validation and error handling.

<Form
data={ formObject }
url='/api/demo'
method='POST'
redirect='/dashboard'
buttonText='Save'
/>

Props

prop

description

value

data

form object (see below)

object

callback

executed after a successful submit (optional)

function

url

url to post the form to

string

method

HTTP request type

string

redirect

url to redirect to after a successful submit (optional)

string

buttonText

submit button label (optional)

string

cancel

show a cancel button (optional)

true or false

Form Object

When constructing a form object, the outer key is the input name which is assigned an object with any combination of input props.

formData = {
name: {
label: 'Your name',
type: 'text',
required: true,
placeholder: 'Jon Smith',
errorMessage: 'Please enter your name',
},
email: {
label: 'Email address',
type: 'email',
required: true,
},
age: {
label: 'Age',
type: 'number',
min: 18,
max: 65,
},
phone: {
label: 'Phone Number',
type: 'phone',
required: false
},
website: {
label: 'Website',
type: 'url',
required: false,
},
gender: {
label: 'Gender',
type: 'radio',
options: ['male', 'female'],
required: true,
},
billingPlan: {
label: 'Billing Plan',
type: 'select',
options: [
{ value: 'plan_startup', label: 'Startup' },
{ value: 'plan_enterprise', label: 'Enterprise' }
],
default: 'plan_startup',
required: true,
}
}

Input Props

prop

description

value

label

input label

string

type

input type

text, number, url, phone, card, file, hidden, password, email, radio, checkbox, select, switch or date

placeholder

placeholder text (optional)

string

value

initial value (optional)

string

min

minimum value on number input (optional)

number

max

maximum value on number input (optional)

number

required

determines if a value is required

true or false

options

array of strings for a radio and checkbox, array of objects for select

array or object

default

default value for radio, select or checkbox (optional)

string

class

custom CSS class name (optional)

CSS Object

errorMessage

overrides the default error message (optional)

string

Form Submission

When your form is submitted to the server, Gravity will optimise the request and only send the name/value pairs, so on the server you can access a value using:

req.body.email

Form Errors

To show an error on a specific form input, simply throw an error on the server with an inputError key and the input name.

throw ({ inputError: 'email', message: 'You\'re already registered' });

Payment Form

To create a Stripe payment form, use the <PaymentForm> component. This is a standard form (as above) wrapped in a Stripe provider.