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
inp={ formObject }
url='/api/demo'
method='POST'
redirect='/dashboard'
buttonText='Save'
/>
prop | description | value |
inputs | 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 |
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,
}
}
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 |
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
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' });
To create a Stripe payment form, use the <PaymentForm> component. This is a standard form (as above) wrapped in a Stripe provider.
Last modified 1mo ago