Form #states only work after change, but not on initial load I've got a paragraph with a select field field_colorschema, depending on its value two other fields field_image field_parallax  on the same paragraph are shown or hidden. The code I've written works for most parts, but only AFTER change of field_colorschema. It does not set the correct state on page load.

function wt_base_field_widget_paragraphs_form_alter(&amp;$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) {
  /** @var \Drupal\field\Entity\FieldConfig $field_definition */
  $fieldDefinition = $context['items']-&gt;getFieldDefinition();
  $parentEntityType = $fieldDefinition-&gt;getTargetEntityTypeId();
  $parentEntityBundle = $fieldDefinition-&gt;getTargetBundle();
  $parentEntityFieldType = $fieldDefinition-&gt;getType();
  $parentEntityFieldName = $fieldDefinition-&gt;getName();


  /**
   * Conditionally hide background image and parallax depending on row colorschema
   * http://agaric.com/blogs/conditional-fields-paragraphs-using-javascript-states-api-drupal-8
   */
  if ($parentEntityFieldName == 'field_pagebuilder') {

    /** @see \Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget::formElement() */
    $widgetState = \Drupal\Core\Field\WidgetBase::getWidgetState($element['#field_parents'], $parentEntityFieldName, $form_state);

    /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
    $paragraph = $widgetState['paragraphs'][$element['#delta']]['entity'];
    $paragraphBundle = $paragraph-&gt;bundle();

    // Determine which paragraph type is being embedded.
    if ($paragraphBundle == 'row') {
      $dependeeFieldName = 'field_colorschema';
      /* field_colorschema option value is one of ['--color-default', '--color-bglight', '--color-bgdark', '--image-bglight', '--image-bgdark'] */
      $selector = sprintf('select[name="%s[%d][subform][%s]"]', $parentEntityFieldName, $element['#delta'], $dependeeFieldName);

      // Dependent fields.
      $element['subform']['field_image']['#states'] = [
        'visible' =&gt; [
          [
            $selector =&gt; ['value' =&gt; '--image-bglight'],
          ],
          [
            $selector =&gt; ['value' =&gt; '--image-bgdark'],
          ],
        ],
        'required' =&gt; [
          [
            $selector =&gt; ['value' =&gt; '--image-bglight'],
          ],
          [
            $selector =&gt; ['value' =&gt; '--image-bgdark'],
          ],
        ],
      ];
      $element['subform']['field_parallax']['#states'] = [
        'visible' =&gt; [
          [
            $selector =&gt; ['value' =&gt; '--image-bglight'],
          ],
          [
            $selector =&gt; ['value' =&gt; '--image-bgdark'],
          ],
        ],
      ];
    }
  }
}


I've also tried inverting everything negative logic (invisible...), because the default value on field_colorschema forces the other 2 fields to be hidden, but again it worked only after change, and not on the initial page load.

What am I missing so that field_image and field_parallax are correctly following field_colorschemas values on the intial page load?

PS: The paragraph subform is inside a Field Group tab, but I think that doesn't matter, because the given code works after selecting values.
My given code works correctly. However, there is a bug in Paragraphs that instantly re-shows hidden fields from form API, see:

https://www.drupal.org/project/paragraphs/issues/2868155#comment-12493576
https://www.drupal.org/project/paragraphs/issues/2946856

Applying the patch from issue #2946856 fixed it for me.