Multi-column checkboxes and radio buttons in Drupal 7

I recently had to wrangle how to make it easy for web users to select multiple items from a fixed list of taxonomy terms. The mockups for the site laid out several dropdowns that were determined to be difficult to navigate. Converting the taxonomy selection checkboxes presented another problem. The lists were too long. Thus started a two-pronged attack. Get the client to shorten the list and get the checkboxes to display in three columns. Fortunately, there was a good starting place on Members of the Drupal community had written a solution for Drupal 6 and partially updated the code for Drupal 7. With a few tweaks I came up with the following code.

Add the following to hook_theme():

function mymodule_theme() {
return array(
# New!
'multicolumn_options' => array(
'arguments' => array('element' => NULL),

And the following somewhere in your .module file:

* Output a list of options in the number of columns specified by the element's
* #columns value.

function theme_multicolumn_options($element) {
$stripped_element = array_values($element);
$element = $stripped_element[0];
// Initialize variables.
$output = '';
$total_columns = $element['#columns'];
$total_options = count($element['#options']);
$options_per_column = ceil($total_options / $total_columns);
$keys = array_keys($element['#options']);
$type = $element[$keys[0]]['#type'];

// Start wrapper div.
$output .= '<div class="multicolumn-options-wrapper">';
$current_column = 1;
$current_option = 0;

while ($current_column <= $total_columns) {
// Start column div.
$output .= '<div class="multicolumn-options-column"> style="width: ' . 100 / $total_columns . '%; float: left">';
// Keep looping through until the maximum options per column are reached,
// or you run out of options.
while ($current_option < $options_per_column * $current_column &&
$current_option < $total_options) {
// Output as either check or radio button depending on the element type.
$output .= theme($type, $element[$keys[$current_option]]);
// End column div.
$output .= '</div>';
// End wrapper div.
$output .= '</div>';
$output .= '<div class="clear-block"></div>';
return $output;

Then you can alter your checkbox with this...

* Modify CCK keyword checkbox element to use multicolumns.
function myform_form_after_build($form, &$form_state) {
$form['myfield']['und']['#theme_wrappers'] = array('multicolumn_options');
$form['myfield']['und']['#columns'] = 3;

return $form;


This is a flexible way to alter the appearance of checkboxs and radio buttons. And the same techniques can be used to modify other form elements.