Form
You will never experience the pain of coding another HTML form again. Create an object with the form fields you need and pass it to the form component.
Your form will be rendered automatically and will perform its own validation and error handling.
<Form
inputs={ formObject } // see below
url='/api/demo'
method='POST'
redirect='/dashboard'
buttonText='Save'
/>
Prop | Description | Required | Value |
|---|---|---|---|
buttonText | submit button label | optional | string |
callback | function executed after a successful submit | optional | function |
cancel | show a cancel button | optional | boolean |
inputs | inputs object | required | |
method | HTTP request type | optional | string |
onChange | callback function fired when updateOnChange is used | optional | boolean |
redirect | url to redirect to after a successful submit | optional | string |
submitOnChange | submit the form on each input change | optional | boolean |
updateOnChange | determine if onChange callback should fire each change | optional | boolean |
url | url to post the form to | optional | string |
When constructing a form object, the outer key is the input name, which is assigned to 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,
}
}
The follow input types are available.
- card
- checkbox
- date
- email
- file
- hidden
- number
- password
- phone
- radio
- select
- switch
- text
- url
Props are passed to the input by the form. A full list of props for the inputs can be found below.
Prop | Description | Required | Value |
|---|---|---|---|
className | custom styles | optional | SCSS or Tailwind style |
default | default value for radio, select or checkbox | optional | string |
disabled | disable the input | optional | boolean |
errorMessage | overrides the default error message | optional | string |
id | html id for the input | optional | string |
label | input label | optional | string |
name | input name | required | string |
onChange | callback function that executes on change | optional | function |
placeholder | placeholder text | optional | string |
required | determines if a value is required | optional | boolean |
valid | determines if the input is valid | required | boolean |
value | initial value | optional | string |
min | minimum value on number, date, fieldset | optional | integer, date |
max | maximum value on number, date, fieldset | optional | integer, date |
options | array of options for a radio, checkbox, or select | optional | array or object |
warning | orange highlight | optional | boolean |
When your form is submitted, 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, 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 1d ago