Show/hide form element based on AJAX-enabled radiobox click in drupal 8

in this tuto, I'll show you how to show/hide form element based on AJAX-enabled radiobox click in drupal 8.

Step1: add Ajax triggers to a form element

$form['cms'] = [
  '#type' => 'radios',
  '#title' => $this->t('Select a cms'),
  '#options' => [
    'drupal' => $this->t('Drupal'),
    'wordpress' => $this->t('Wordpress'),
    'joomla' => $this->t('Joomla'),
    'other' => $this->t('Other'),
  ],
  '#ajax' => [
    'callback' => '::radioCallback',
    'wrapper' => 'cms_container',
  ],
];

• callback: The callback to invoke to handle the server side of the Ajax event. More information on callbacks is below in "Setting up a callback to process Ajax".
• wrapper: The HTML 'id' attribute of the area where the content returned by the callback should be placed. Note that callbacks have a choice of returning content or JavaScript commands; 'wrapper' is used for content returns.

Add radioCallback():

/**
 * @param $form
 * @param FormStateInterface $form_state
 * @return mixed
 */
public function radioCallback($form, FormStateInterface $form_state)
{
  return $form['cms_container'];
}

Step2: show textfield element when 'other' option is clicked

Wrap textfields in a container. This container will be replaced through ajax.

$form['cms_container'] = [
  '#type' => 'container',
  '#attributes' => [
    'id' => 'cms_container'
  ],
];


if ($form_state->getValue('cms', NULL) === "other") {
  $form['cms_container']['other_cms'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Other CMS'),
  ];
}

This form is rebuilt on all requests, so whether or not the request comes from AJAX.

by default 'Other CMS' is hidden, it will be visible when I checked 'other' option.