You can use field logic to dynamically change field component definitions based on many different triggers. For example, you can make a field required based on another field’s value or change another fields value.
This can also be configured on our beta portal (https://beta.form.io) under the “Field Logic” tab.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdn.form.io/js/formio.embed.js"></script>
<div id="formio"></div>
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'iAmATrigger',
label: 'I am a trigger',
placeholder: 'Enter joe or bob.',
input: true,
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true,
tooltip: 'Enter your <strong>Last Name</strong>',
description: 'Enter your <strong>Last Name</strong>',
logic: [
{
name: 'Bob Logic',
trigger: {
type: 'simple',
simple: {
show: true,
when: 'iAmATrigger',
eq: 'bob',
},
},
actions: [
{
name: 'Set to snob',
type: 'value',
value: "value = 'snob';",
},
],
},
{
name: 'Joe Logic',
trigger: {
type: 'simple',
simple: {
show: true,
when: 'iAmATrigger',
eq: 'joe',
},
},
actions: [
{
name: 'Set schmoe',
type: 'value',
value: "value = 'schmoe';",
},
],
},
],
},
],
});