Forms API #states with multiple radios I've got one radios element:

$form['trip_radios'] = array(
  '#type' =&gt; 'radios',
  '#options' =&gt; array(
    'new' =&gt; t('Create a new trip'),
    'existing' =&gt; t('Use an existing trip'),
  )
);


I've got some #states prepared:

$trip_states = array(
  'visible' =&gt; array(
    ':input[name="trip_radios"]' =&gt; array(
      'value' =&gt; 'new'
    )
  )
);


And some other elements that use $trip_states for their #states:

$form['itinerary_radios'] = array(
  '#type' =&gt; 'radios',
  '#options' =&gt; array(
    'new' =&gt; t('Create a new itinerary'),
    'existing' =&gt; t('Use an existing itinerary'),
  ),
  '#states' =&gt; $trip_states
);

$form['title'] = array(
  '#type' =&gt; 'textfield',
  '#title' =&gt; 'Itinerary name',
  '#required' =&gt; FALSE,
  '#states' =&gt; $trip_states
);


The title form element (and many others) properly listens to the #states condition and works just fine. However, itinerary_radios always shows up no matter what (if anything) is checked on trip_radios. Why does a visible condition on a radios element's #states not listen to another radios value?
In misc/states.js, it looks for the closest form-item, form-submit, or form-wrapper. Here's the line:

$(e.target).closest('.form-item, .form-submit, .form-wrapper').toggle(e.value);


This does not play well with the way radios are themed, and states.js does not find anything to toggle. Wrapping the itinerary_name radios in a container and applying #states to the container item is what I would call the quickest workaround.

$form['itinerary_radios'] = array(
  '#type' =&gt; 'container',
  '#attributes' =&gt; array(),
  'radios' =&gt; array(
    '#type' =&gt; 'radios',
    '#options' =&gt; array(
      'new' =&gt; t('Create a new itinerary'),
      'existing' =&gt; t('Use an existing itinerary'),
    ),
  ),
  '#states' =&gt; $trip_states
);