Creating Checkboxes, Radio Buttons, or Select Lists

Creating radio buttons, checkboxes, and select lists is a little tricky in Webform, since they're all part of the "select" component type. To create these types, follow the instructions below for the type of element you are trying to create.

• Select list (single selection) - choose the "Select options" type, enter the values and label, and make sure "Listbox" option is checked (on).
• Select list (multiple selection) - choose the "Select options" type, enter the values and label, then choose the "Multiple" advanced setting, and make sure "Listbox" option is checked (on).
• Checkbox - choose the "Select options" type, enter the value and label, then choose the "Multiple" advanced setting (even if you just want one checkbox to appear), and make sure "Listbox" option is not on.
• Checkboxes (multiple) - choose the "Select options" type, enter the values and label, then choose the "Multiple" advanced setting, and make sure "Listbox" option is not on.
• Radio buttons - choose the "Select options" type, enter the values and label. Make sure both the 'Multiple' advanced setting and "Listbox" option settings are not on.

Options can be grouped for listboxes only ("Listbox" option setting on).

Note if the default option is left blank, an option for "- Please select -" will be added automatically for non-required fields and "- Select an option -" for required field.

Entering options through the interface

For most users, options will be defined through the Webform interface after adding a new "Select options" component. When adding or editing a component, you may specify list options in a textarea. Note that if you install the Option element module, specifying options is much cleaner than the single textarea approach used by default.

Without Options Element module, you'll be given an options box where options are specified as key|value pairs and optionally grouped by using brackets such as <groupname>. For example a country list:

<Europe>
nl|The Netherlands
be|Belgium
fr|France
<Africa>
tu|Tunisia
sa|South Africa
<Asia>
ru|Russia
cn|China
<>
key|some country that is in no group

Defined options through code

If you have a list of data that is regularly customized through some database value or some other dynamic criteria, you may consider having the options generated by a predefined list. Webform includes a few pre-defined lists by default, such as Days of the Week, US States, and Countries of the world (with either Countries API in Drupal 6 or out-of-box with Drupal 7). You can create your own predefined lists by using the webform_webform_select_options_info hook. To do this, create an empty module or edit an existing custom module. In yourmodule.module, add a function yourmodule_webform_select_options_info(). This function must return an array of pre generated select boxes. In order to return the above select box the code would look like this:

/**
 * Implements hook_webform_select_options_info().
 */
function yourmodule_webform_select_options_info() {
  $items = array();
  $items['countries'] = array(
    'title' => t('Countries'),
    'options callback' => 'webform_options_countries',
  );
  return $items;
}

/**
 * Webform options info callback.
 */
function webform_options_countries() {
  $countries = array(
    t('Europe') => array (
      'nl' =>  t('The Netherlands'),
      'be' =>  t('Belgium'),
      'fr' =>  t('France'),
    ),
    t('Africa') => array (
      'tu'  =>  t('Tunisia'),
      'sa'  =>  t('South Africe'),
    ),
    t('Asia') => array (
      'ru'  =>  t('Russia'),
      'cn'  =>  t('China'),
    ),
    'key' => t('some country that is in no group'),
  );
  return $countries;
}

Select list extension modules:

• Options Element: Provides a better UI for creating select list options.
• Country codes API: Adds a countries list to the pre-built options lists.
• Select (or other): Allows for a textfield for "Other..." options in select lists and radio buttons.
• View Reference Component: Use a View as the data source for select options instead of hard-coding them.
• Webform Conditional: Makes a field appear or not depending on the value of a previous select option on the same page. Note: This can be done without Webform Conditional, but the dependent field must be on a separate page.