Gravity
Search…
Form
With Gravity, forms are simple and require almost no work to set up. Simply create an object with the form fields you need and pass it to the <Form> component. You can render any input type you need – from text boxes to pickers and sliders.
1
<Form
2
data={ formObject }
3
url='/api/demo'
4
method='POST'
5
buttonText='Save'
6
callback={ this.onSuccess }
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
buttonText
submit button label (optional)
string

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
dob: {
21
label: 'Date of birth',
22
type: 'date',
23
},
24
hungry: {
25
label: 'Feeling hungry?',
26
type: 'switch',
27
},
28
happiness: {
29
label: 'Happiness level',
30
type: 'slider',
31
},
32
phone: {
33
label: 'Phone Number',
34
type: 'phone',
35
required: false
36
},
37
website: {
38
label: 'Website',
39
type: 'url',
40
required: false,
41
},
42
gender: {
43
label: 'Gender',
44
type: 'picker',
45
options: ['male', 'female'],
46
required: true,
47
}
48
}
Copied!

Input Props

prop
description
value
label
input label
string
type
input type
text, email, password, number, url, phone, hidden, picker, date, time, switch, slider
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
step
increment amount for number (optional)
number
required
determines if a value is required
true or false
options
array of strings for a picker
array
default
default value (optional)
string
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!
Last modified 1yr ago