Conditional form fields visibility with form states.(Using #states visible)

  Step 1:-    Use the #states in a custom form.

created some important files for custom forms like:

1. Creating a custom module in the custom folder(Follow path “\web\modules\custom”)
2.  info.yml
3.  routing.yml

4. Creating Form folder in custom module (Follow path “\module_name\src\Form\VisibityForm.php”)

Code:-

<?php

namespace Drupal\module_name\Form;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface; //use for form state

/**

 * Configure miscfixes settings for this site.

 */

class VisibityForm extends FormBase {

  /**

   * {@inheritdoc}

   */

  public function getFormId() {

    return 'miscfixes_visibityForm';

  }

  /**

   * {@inheritdoc}

   */

 public function buildForm(array $form, FormStateInterface $form_state) {

    $form['field_item_type'] = [

        '#type' => 'select',

        '#title' => $this->t('Title'),

        '#description' => $this->t('Title must be at least 5 characters in length.'),

        '#options' => ['tv_show'=> 'Tv show','serials' => 'Serials', 'news' => 'news']

      ];

      $form['field_extra'] = [

        '#type' => 'select',

        '#title' => $this->t('Title'),

        '#description' => $this->t('Title must be at least 5 characters in length.'),

        '#options' => ['movie' => 'movie','chair'=>'Chair'],

      ];

/* visible if you selected the tv show and movie any one */

      $form['field_format'] = [

        '#type' => 'textfield',

        '#title' => $this->t('Select tv show and Movie any one'),

        '#description' => $this->t('Title must be at least 5 characters in length.'),

        '#required' => TRUE,

      ];

     

/* visible if you selected the serials*/

      $form['field_format_serials'] = [

        '#type' => 'textfield',

        '#title' => $this->t('Select the Serials'),

        '#description' => $this->t('Title must be at least 5 characters in length.'),

        '#required' => TRUE,

      ];

      $form['field_format']['#states'] = [

        'visible' => [

          [

            [':input[name="field_item_type"]' => ['value' => 'tv_show']],

            'or',

            [':input[name="field_extra"]' => ['value' => 'movie']],

          ],

        ],

      ];

      $form['field_format_serials']['#states'] = [

        'visible' => [

          [

            [':input[name="field_item_type"]' => ['value' => 'serials']],

          ],

        ],

      ];

    $form['submit'] = array(

        '#type' => 'submit',

        '#attributes' => array('class' => array('site-link link-1 ln-md')),

        '#value' => t('Submit'),

    );

    return $form;

  }

  /**

   * {@inheritdoc}

   */

  public function validateForm(array &$form, FormStateInterface $form_state) {

  }

  /**

   * {@inheritdoc}

   */

  public function submitForm(array &$form, FormStateInterface $form_state) {

 

  }

}

  Step 2:- How can I hide or show fields using states with hook form alter??

.module

function module_name_form_alter( &$form, \Drupal\Core\Form\FormStateInterface  &$form_state, $form_id ) {

if ( TRUE === in_array( $form_id, array( 'node_training_form','node_training_edit_form') ) ) {

      $form['field_email']['#states'] = [

        'visible' => [

          [

            [':input[name="field_tags[1]"]' => ['checked' => TRUE]],

          ],

        ]

      ];

      $form['field_phone']['#states'] = [

        'visible' => [

          [

            [':input[name="field_tags[2]"]' => ['checked' => TRUE]],

          ],

        ]

      ];

    }

}