drupal: Form API, dynamically hide or show fields based on input

Question

I'm building a form module. One of the early fields is a set of radio buttons. By default the first button is selected. Next I'll have a series of select boxes. One needs to be visible, the others invisible. Then as the user selects a different radio button I want different select boxes to show or hide. How can I hide the field and label by default and show it later dependent upon which radio button (or another select box option for that matter) is chosen?

Answer 1

You can use the #states property to achieve that. The #states property can be applied to all Form API elements.

Here's the documentation link with an example.

Answer 2

simple usage example of #states: To show a select field with name 'item' only if another field with name 'type' has value 'sell'

$form['item'] = array( 
        '#title' => t('Task Item'),
        '#type' => 'select',
        '#states' => array(
            // Only show this field when the value of type is sell.
            'visible' => array(
                ':input[name="type"]' => array('value' => 'sell'),
            ),
        ),
    );