Conditional Fields

You can conditionally display fields based on the values of other fields in your form. For example, if you wanted to display a video embed text field only if the type of article, a radio field, is "video" you'd do something like the following:

 1$form->add(\A17\Twill\Services\Forms\Fields\Radios::make()
 2  ->name('type')
 3  ->label('Article type')
 4  ->inline()
 5  ->default('long_form')
 6  ->options([
 7    [
 8      'value' => 'long_form',
 9      'label' => 'Long form article'
10    ],
11    [
12      'value' => 'video',
13      'label' => 'Video article'
14    ]
15  ])
16);
17 
18$form->add(\A17\Twill\Services\Forms\Fields\Input::make()
19  ->name('video_embed')
20  ->label('Video embed')
21  ->connectedTo('type', 'video')
22);

 1<x-twill::radios
 2    name="type"
 3    label="Article type"
 4    default="long_form"
 5    :inline="true"
 6    :options="[
 7        [
 8            'value' => 'long_form',
 9            'label' => 'Long form article'
10        ],
11        [
12            'value' => 'video',
13            'label' => 'Video article'
14        ]
15    ]"
16/>
17 
18<x-twill::formConnectedFields
19    field-name="type"
20    field-values="video"
21    :render-for-blocks="true" {{-- Depends on the context --}}
22>
23    <x-twill::input
24        name="video_embed"
25        label="Video embed"
26    />
27</x-twill::formConnectedFields>

Here's an example based on a checkbox field where the value is either true or false:

 1$form->add(\A17\Twill\Services\Forms\Fields\Checkbox::make()
 2  ->name('vertical_article')
 3  ->label('Vertical story')
 4);
 5 
 6$form->add(\A17\Twill\Services\Forms\Fields\Medias::make()
 7  ->name('vertical_image')
 8  ->label('Vertical Image')
 9  ->connectedTo('vertical_article', true)
10);

 1<x-twill::checkbox
 2    name="vertical_article"
 3    label="Vertical story"
 4/>
 5 
 6<x-twill::formConnectedFields
 7    field-name="vertical_article"
 8    :field-values="true"
 9    :render-for-blocks="true" {{-- Depends on the context --}}
10>
11    <x-twill::medias
12        name="vertical_image"
13        label="Vertical Image"
14    />
15</x-twill::formConnectedFields>

Here's an example based on a checkboxes field where the values are stored in a json field:

 1$form->add(\A17\Twill\Services\Forms\Fields\Checkboxes::make()
 2  ->name('article_target')
 3  ->label('Target')
 4  ->min(1)->max(3)->inline()
 5  ->options([
 6    [
 7      'value' => 'students',
 8      'label' => 'Students'
 9    ],
10    [
11      'value' => 'teachers',
12      'label' => 'Teachers'
13    ],
14    [
15      'value' => 'administration',
16      'label' => 'Administration'
17    ]
18  ])
19);
20 
21$form->add(\A17\Twill\Services\Forms\Fields\Files::make()
22  ->name('attachment')
23  ->label('Attachment')
24  ->connectedTo('article_target', ['teachers', 'administration'], [
25    'keepAlive' => true,
26    'arrayContains' => true, // If you don't pass an array as fieldValues, set to false
27  ])
28);

 1@formField('checkboxes', [
 2    'name' => 'article_target',
 3    'label' => 'Target',
 4    'min' => 1,
 5    'max' => 3,
 6    'inline' => true,
 7    'options' => [
 8        [
 9            'value' => 'students',
10            'label' => 'Students'
11        ],
12        [
13            'value' => 'teachers',
14            'label' => 'Teachers'
15        ],
16        [
17            'value' => 'administration',
18            'label' => 'Administration'
19        ],
20    ]
21])
22 
23@formConnectedFields([
24    'fieldName' => 'article_target',
25    'fieldValues' => ['administration', 'teachers'],
26    'arrayContains' => true, // If you don't pass an array as fieldValues, set to false
27    'keepAlive' => true,
28    'renderForBlocks' => true/false # (depending on regular form vs block form)
29])
30    @formField('files', [
31        'name' => 'attachment',
32        'label' => 'Attachment'
33    ])
34@endformConnectedFields

Here's an example based on a browser field where the fields are displayed only when the browser field is not empty:

 1$form->add(\A17\Twill\Services\Forms\Fields\Browser::make()
 2  ->name('related_publications')
 3  ->label('Related publications')
 4  ->max(4)
 5  ->modules([Publications::class]))
 6);
 7 
 8$form->add(\A17\Twill\Services\Forms\Fields\Input::make()
 9  ->name('related_publications_header')
10  ->label('Related publications header')
11  ->connectedTo('article_publications', true, [
12    'isBrowser' => true,
13    'keepAlive' => true,
14  ])
15);
16$form->add(\A17\Twill\Services\Forms\Fields\Input::make()
17  ->name('related_publications_copy')
18  ->label('Related publications copy')
19  ->connectedTo('article_publications', true, [
20    'isBrowser' => true,
21    'keepAlive' => true,
22  ])
23);

 1<x-twill::browser
 2    module-name="publication"
 3    name="related_publications"
 4    label="Related publications"
 5    :max="4"
 6/>
 7 
 8<x-twill::formConnectedFields
 9    field-name="publication"
10    :is-browser="true"
11    :keep-alive="true"
12>
13    <x-twill::input
14        name="related_publications_header"
15        label="Related publications header"
16    />
17    <x-twill::input
18        name="related_publications_copy"
19        label="Related publications copy"
20    />
21</x-twill::formConnectedFields>

Option	Description	Type	Default value
fieldName	Name of the connected field	string
fieldValues	Value or values of the connected field that will reveal the fields in this component's slot	string\|array
isEqual	Controls how `fieldValues` are evaluated against the connected field	boolean	true
isBrowser	Indicates that the connected field is a `browser` field	boolean	false
arrayContains	Controls how `fieldValues` are evaluated when connected field is an array	boolean	true
matchEmptyBrowser	When set to true, the fields in this component's slot will be revealed when the browser is empty	boolean	false
keepAlive	When set to true, the state of the hidden fields is preserved	boolean	false
renderForBlocks	When used inside a block, this needs to be set to true (this is automatically set when using the FormBuilder)	string	false