Element Forms - form.tsx | Vev Help Center

If your components need any settings or data which should be adjustable in the Design Editor, these variables can be made available to the user effortlessly using our JSX Form Syntax.

The form.tsx takes TSX Markup; see the syntax for this below. You may use inline styles and regular HTML markup, which will be reflected when opening the settings form by double-clicking on your widget.

Note that once you delete an instance of a Widget from a project, and you had filled in some settings or data for the widget, these will also be deleted.

TSX Forms

A simple text field:

<TextField

name="myTextField"

label="This is a text field"

help="What is a text field?"

/>

Form fields

Form fields are components that handle input. Here is a list of available form fields:

ArrayField lets users create arrays of elements

ColorField for selecting colors

DateTimeField select date and time

DateField select a date

If for adding conditions to forms

ImageField select images from project assets

LinkField set up links and transitions

NumberField for number input

PageSelectField select pages from project

SelectField dropdown menus

SelectItemField dropdown menu items

SelectItemDivider dividers in dropdowns

TextField normal text input

TimeField for picking a time of day

ToggleField simple switch

TweenField for building animations/transitions

Customization

In these form fields, as we call them, we've added a bunch of optional tags that you can use freely to make exactly what you want. In this example is a login form:

<TextField

name="email"

label="email"

help="Type in your email"

error="invalid email!"

email

/>

<TextField

name="password"

label="Password"

help="Type in your password"

password

/>

email Checks if the input is a valid email

phone Checks if the input is a valid phone number

url Checks if the input is a valid url

password Hides the input like a regular password field

help A small text displayed under the field

error Your own custom error message that shows when the input is invalid

Conditionals

Conditionals are a great way to minimize the length of your form. You can tell a field to hide until the condition is met. Let's take a look at this example:

<ToggleField

name="delivery"

label="Do you want delivery?"

/>

<If field="delivery" is={true}>

<TextField

name="address"

label="Your address"

/>

<TextField

name="notes"

label="Notes to driver"

/>

</If>

Explanation: ToggleField is basically a checkbox. It's either checked or unchecked. If the user checks "Do you want the pizza delivered" the two TextFields will show.

Required

By default, a form field is not required. e.g the user can fill out 1 out of 100 fields and the form can still be submitted. If you want a field to be required, simply add a required attribute:

<NumberField

name="important"

label="Number"

required

/>

If a user tries to skip this field and submit the form, an error message will tell the user to fill all the fields that have the required tag. Required fields will also have a small text under it, indicating that it's required.

Defaults

If you want your field to have a default value, simply pass the default attribute with some value.

<DateField

name="date"

label="Set a date"

default="11-25-2019"

/>

Note: Fields that handle dates must use this format: MM:DD:YYYY

ArrayField

To create lists (arrays) use the ArrayField. It comes with the functionality of adding more fields in the form itself. In this case, each time a user wants more fields two more will be generated. The user can also sort the fields by dragging it over another. Note also the different ways of setting default values.

<ArrayField

default={[

{

first: 'Default value',

second: 'Default value'

}

]}

defaultValue={{

first: 'Default from ArrayField'

}}

label="An array field for testing defaults"

name="array">

<TextField

label="Text"

name="first"

/>

<TextField

label="More text"

name="second"

/>

</ArrayField>

SelectField

SelectField is basically a select box. It's up to you what the user can select:

<SelectField

name="select"

label="pick one">

<SelectItemField

value="pepperoni"

name="Pepperoni"

/>

<SelectItemDivider />

<SelectItemField

value="ham"

name="Ham"

/>

</SelectField>

SelectItemDivider is optional; it divides the items more clearly if you want to sort the list into sub-sections, and may have a label.

Additional tags

multiSelect Enables the selection of multiple items
min The minimum amount of selected items
max The maximum amount of selected items

SelectFieldItem also supports icons:

<SelectField

name="select"

label="pick one">

<SelectItemField

value="pepperoni"

name="Pepperoni"

icon="your link here"

/>

</SelectField>

TextField

Pretty much self-explanatory. Here are some tags

icon Displays an icon to the right of the field
minLength If you want to validate the field to be atleast x characters
maxLength If you want to validate the field to be max x characters
regexp A regular expression to validate the field
<TextField
name="notes"
label="label"
icon="your link here"
minLength={5}
maxLength={10}
/>

NumberField

A field for numbers only.

min Your smallest valid number

max Your biggest valid number

<NumberField

name="number"

label="Number"

min={10}

max={30}

/>

Dates and time

DateTimeField – For date and time

<DateTimeField

name="datetime"

label="Date and time"

default="10-25-2017 15:30"

/>

DateField – Only dates

<DateField

name="datetime"

label="Date and time"

default="10-25-2017"

/>

TimeField – Only time

<TimeField

name="datetime"

label="Date and time"

default="15:30"

/>

ColorField

For picking colors there is the ColorField. It accepts HEX, RGBA, RGB and name. You can either write the color codes in the field or pick a color with the color picker.

<ColorField

name="color"

label="Pick a color"

/>

HTML Elements

Create your first custom element

Creating a Login form using Formspree