Some #states not working for custom field but do work on identical webform field I'm working on a project where I'm programmatically cherry picking elements from a webform and then creating a custom form with all sorts of alterations and additions to the &quot;cloned&quot; webform fields.
$my_custom_field = $webform-&gt;getElement($webform_field_id, TRUE);

I'm then rendering a number of custom fields like the above in a custom form that extends from FormBase. The custom webform consists of fields, custom containers, attributes etc.
Everything works fine, #states included, apart from the &quot;pattern&quot; state and a few other states that are based on relative values e.g. &quot;greater&quot; / &quot;greater_equal&quot; / &quot;lower&quot; / &quot;lower_equal&quot;. I'm adding these #states programmatically to the custom fields.
Example:
$custom_field['#states'] = [
  'visible' =&gt; [
    ':input[name=&quot;controlling_field_name&quot;]' =&gt; [
      'value' =&gt;
        // I've tested this pattern, it works in the webform field fine.
        'pattern' =&gt; $some_regex_pattern,
      ],
    ],
  ],
];

Apart from 'pattern', I've tried 'between' and 'greater', 'greater_equal', 'lower' and 'lower_equal' with no success.
The same exact #states (same field being dependant on same controlling field under the same exact conditions) work fine on the original webform field (when I view the webform on the admin theme for example) which makes me think that something is missing from / messing up with these #states on my custom theme.
No JS errors in the console whatsoever.
The structure of &quot;data-drupal-states&quot; when I render this custom field (webform field &quot;clone&quot;) in my custom theme is exactly the same as the webform field that's rendered on the admin theme ie in its &quot;native&quot; webform.
Other #states work fine for the custom field (&quot;value&quot;, &quot;checked&quot; etc.).
Any ideas on what's possibly messing up these specific states?
Webform form elements have additional goodies, not available in Drupal Core. But you can add those additional features with just a few lines of code:
&lt;?php
public function buildForm(array $form, FormStateInterface $form_state) {
 $config = $this-&gt;config('custom_module');
 // Define the element(s).
 $form['nodes'] = [
   '#type' =&gt; 'entity_autocomplete',
   '#title' =&gt; $this-&gt;t('Select favorite articles.'),
   '#multiple' =&gt; 15,
   '#target_type' =&gt; 'node',
   '#selection_handler' =&gt; 'default:node',
   '#selection_settings' =&gt; [
     'target_bundles' =&gt; ['article' =&gt; 'article'],
     'sort' =&gt; ['field' =&gt; 'title', 'direction' =&gt; 'ASC'],
   ],
   '#default_value' =&gt; $config-&gt;get('nodes'),
 ];
 // Process the element(s).
 $this-&gt;elementManager-&gt;processElement($form['nodes']);
 // Attach behaviors. Unsaved: Warn users about unsaved changes.
 $form['#attributes']['class'][] = 'js-webform-unsaved';
 $form['#attached']['library'][] = 'webform/webform.form.unsaved';
 return parent::buildForm($form, $form_state);
}

Notice the elementManager-&gt;process() and the additional libraries. Watch the video in the linked blog post to get an idea where to get the elementManager and the libraries.
https://www.jrockowitz.com/blog/webform-apis