Gravity
Search
K

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.

Preview

Code

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

Props

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
object (see below)
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

Inputs Object

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,
}
}

Input Types

The follow input types are available.
  • card
  • checkbox
  • date
  • email
  • file
  • hidden
  • number
  • password
  • phone
  • radio
  • select
  • switch
  • text
  • url

Input Props

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

Form Submission

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

Form Errors

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' });

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 1d ago