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.