Skip to main content

Vev props

Props are properties sent from the Design Editor to your component(s).

Base

All props share these common properties:

Name/typeDescription
name
string
Name of the prop
type
string
Type of the prop. Can be one of the following:
string | number | boolean | image | object | array | select | link.
title
string
Title of the prop visible in the edtior. If not set, a sentence case of the name will be used
description
string
Description of the prop visible in the editor.
component
ReactNode
Replaces the field with a custom React component.
initialValue
JSON
The initial value for the field. Have to match the type of the field. Can also be a function or async function returning the value.
validate
boolean | function
Can either be boolean or a function returning boolean. The first argument of the function is the value of the field and the second is the context of the entire form.
hidden
boolean | function
Hide/unhide field. Can either be boolean or a function returning boolean. The first argument of the function is the value of the field and the second is the context of the entire form. Can be used to toggle visible based on values from other fields.
onChange
function
A custom onChange for the field. The first argument of the function is the value of the field and the second is the context of the entire form.
storage
string
Select where to store values for the component (like API keys etc.). Can be project | workspace | account.

String

A field type for string.

type: "string",

Options:

OptionsDescription
type
string
Can be 'text' | 'date' | 'email' | 'url' | 'password'. Default is text.
multiline
boolean | number
Select if the field should be multiline or not. Can either be boolean or a number representing the lines of the text the field should include.
minLength
number
The minimum characters for the field.
maxLength
number
The maximum characters for the field.

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "title",
type: "string",
options: {
minLength: 10,
maxLength: 20,
},
},
],
});

Number

A field type for number.

type: "number",
OptionsDescription
min
number
The minimun number for the field.
max
number
The maximum number for the field.
format
string
This will appear as a suffix for the number. Can be '%' | 'px' | 'deg'.
display
string
The appearance of the field. Can be 'input' | 'slider'. Used for displaying a slider instead of a number field.
Default is: input.
scale
number
Set a custom scale for the field. If you want percent from 0-1 set scale to 100

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "price",
type: "number",
options: {
min: 100,
max: 1000,
},
},
],
});

Boolean

A field type for boolean. This will display a toggle switch in the form.

type: "boolean",

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "showOnMobile",
type: "boolean",
},
],
});

Select

Can be used to display either radio buttons, a dropdown or multiselect.

type: "select",

Options:

OptionsDescription
items
array
An array of options in this format: label: string, value: string.
Can also be async.
display
string
Can be: 'checkbox' | 'radio' | 'dropdown' | 'autocomplete'.
Default is dropdown.
multiselect
boolean
If it should be possible to select multiple values.

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "selectFruits",
type: "select",
options: {
display: "radio",
items: [
{ label: "Apple", value: "apple" },
{ label: "Orange", value: "orange" },
{ label: "Banana", value: "banana" },
],
},
},
],
});

Image

A field type for image. This will display an image upload field in the editor.

type: "image",

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "image",
type: "image",
},
],
});

A field for link. This will display a link field in the editor. This will give a search field for internal links. If an internal link is not selected it will behave like an external link.

type: "link",
registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "link",
type: "link",
},
],
});

Object

A field type for object. This can be used to display fields in a group. All of the Vev props can be used as fields.

type: "object",
fields: VevProps[],

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "header",
type: "object",
fields: [
{
name: "title",
type: "string",
},
{ name: "subtitle", type: "string" },
{ name: "iamge", type: "image" },
],
},
],
});

Array

A field type for array. This can be used to make a list of editable properties. All of the Vev props can be used as of.

type: "array",
of: VevProps[],

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
name: "products",
type: "array",
of: [
{
name: "title",
type: "string",
},
{ name: "price", type: "number" },
],
},
],
});

Layout

A field to be used for layout.

type: "layout",
fields: VevProps[],

Options:

OptionsDescription
display
string
Can be row | column. Default is row.

Example:

registerVevComponent(MyComponent, {
name: "My component",
props: [
{
type: "layout",
options: {
display: "row",
},
fields: [
{ name: "x", type: "number" },
{ name: "y", type: "number" },
{ name: "z", type: "number" },
],
},
],
});