Formfields

Formfields are the heart of every layout.
They display, parse and handle incoming data and input.

Common options

Column

Here you select which column this formfield consumes.
This can be table columns, accessor, relationship properties or relationship methods. Please be aware that (most of the time) the column is necessary.
When saving the BREAD with a formfield that does not have a column assigned, a warning will be shown.

Translatable

If you want your data to be translatable, check this box.
Please note that some formfields, like the relationship formfield, can not be translated.In this case the checkbox is not shown.
Read more about multilanguage here

Title

The title shown above the formfield.
This field is translatable.

Description

The description shown below the formfield.
This field is translatable.

Component

Here you can provide a name of a custom Vue component.
Read more how to add components to Voyager here

Classes

This input allows you to enter additional CSS classes applied to the parent formfield element.

Validation

Here you enter all your validation rules and messages which wil be displayed when the rule fails.
The message field is translatable.
Learn more about validation here

Overview

This table gives you an overview of all built-in formfields and their recommended column type

FormfieldDescriptionRecommended column type
CheckboxesCheck one or many given optionsJSON*
Date & TimeSelect date and/or time. Single or rangeDate, Timestamp, JSON*
Dynamic inputA dynamic form containing user generated data/inputsDepending on your resulting key(s)
Media pickerSelect one or many files with the media managerJSON*
NumberEnter a number, float or doubleInt, Float, Double
PasswordA password formfieldText, Varchar
RadiosSelect one of many given optionsText, Number, ... (depending on your value)
RelationshipDisplay a relationshipDepending on your resulting key(s)
RepeaterDisplay a repeatable set of formfieldsJSON*
SelectSelect one or multiple given optionsText, Varchar, JSON
Simple arrayEnter multiple values of any kindJSON*
SliderSelect a numeric value from a slider/rangeInt, JSON*
SlugGenerate a slug from a given formfieldText, Varchar
TagsAllows you to enter tagsJSON*
TextA standard text formfieldText, Longtext, Varchar
ToggleA binary switchVarchar, Integer, Binary

Formfields with an asterisk require the column to be real JSON as the result is always an array.