Form schema
Condition
Learn what the condition element is about and how it is used in the schema.
Usage
The condition element is used to define a condition.
Structure
It is defined using the following structure.
{
"cond": {
"if": "expression",
"then": ["element", "element", "..."],
"else": ["element", "element", "..."]
}
}
The value of if
corresponds to an Expry expression and it has to evaluate to a boolean value. If it is true
, the elements inside then
will be used; otherwise, the elements inside else
will be used.
Example
Here is an example in which the condition element is used.
import type { Schema } from "formity";
const schema: Schema = [
{
form: {
defaultValues: {
softwareDeveloper: [true, []],
},
resolver: {},
render: {
form: {
step: "$step",
defaultValues: "$defaultValues",
resolver: "$resolver",
onNext: "$onNext",
children: {
formLayout: {
heading: "Are you a software developer?",
description:
"We would like to know if you are a software developer",
fields: [
{
yesNo: {
name: "softwareDeveloper",
label: "Software Developer",
},
},
],
button: {
next: { text: "Next" },
},
back: {
back: { onBack: "$onBack" },
},
},
},
},
},
},
},
{
cond: {
if: { $eq: ["$softwareDeveloper", true] },
then: [
{
form: {
defaultValues: {
languages: [[], []],
},
resolver: {},
render: {
form: {
step: "$step",
defaultValues: "$defaultValues",
resolver: "$resolver",
onNext: "$onNext",
children: {
formLayout: {
heading: "What are your favourite programming languages?",
description:
"We would like to know which of the following programming languages you like the most",
fields: [
{
multiSelect: {
name: "languages",
label: "Languages",
options: [
{ value: "javascript", label: "JavaScript" },
{ value: "python", label: "Python" },
{ value: "go", label: "Go" },
],
direction: "y",
},
},
],
button: {
next: { text: "Next" },
},
back: {
back: { onBack: "$onBack" },
},
},
},
},
},
},
},
{
return: {
softwareDeveloper: "$softwareDeveloper",
languages: "$languages",
},
},
],
else: [
{
form: {
defaultValues: {
interested: ["maybe", []],
},
resolver: {},
render: {
form: {
step: "$step",
defaultValues: "$defaultValues",
resolver: "$resolver",
onNext: "$onNext",
children: {
formLayout: {
heading: "Would you be interested in learning how to code?",
description: "Having coding skills can be very beneficial",
fields: [
{
listbox: {
name: "interested",
label: "Interested",
options: [
{
value: "maybe",
label: "Maybe in another time.",
},
{
value: "yes",
label: "Yes, that sounds good.",
},
{ value: "no", label: "No, it is not for me." },
],
},
},
],
button: {
next: { text: "Next" },
},
back: {
back: { onBack: "$onBack" },
},
},
},
},
},
},
},
{
return: {
softwareDeveloper: "$softwareDeveloper",
interested: "$interested",
},
},
],
},
},
];
export default schema;