Gravity
Search…
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.
1
<Form
2
data={ formObject }
3
url='/api/demo'
4
method='POST'
5
redirect='/dashboard'
6
buttonText='Save'
7
/>
Copied!

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
updateOnChange
fires the callback method when an input changes
true or false
submitOnChange
fires the submit function when an input changes
true or false
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.
1
formData = {
2
name: {
3
label: 'Your name',
4
type: 'text',
5
required: true,
6
placeholder: 'Jon Smith',
7
errorMessage: 'Please enter your name',
8
},
9
email: {
10
label: 'Email address',
11
type: 'email',
12
required: true,
13
},
14
age: {
15
label: 'Age',
16
type: 'number',
17
min: 18,
18
max: 65,
19
},
20
phone: {
21
label: 'Phone Number',
22
type: 'phone',
23
required: false
24
},
25
website: {
26
label: 'Website',
27
type: 'url',
28
required: false,
29
},
30
gender: {
31
label: 'Gender',
32
type: 'radio',
33
options: ['male', 'female'],
34
required: true,
35
},
36
billingPlan: {
37
label: 'Billing Plan',
38
type: 'select',
39
options: [
40
{ value: 'plan_startup', label: 'Startup' },
41
{ value: 'plan_enterprise', label: 'Enterprise' }
42
],
43
default: 'plan_startup',
44
required: true,
45
}
46
}
Copied!

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:
1
req.body.email
Copied!

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.
1
throw ({ inputError: 'email', message: 'You\'re already registered' });
Copied!

Payment Form

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