How can I add <div> to all checkboxes?

Question

I just want to wrap checkboxes like this in all the forms, automatically.

<div class="inline field">
  <div class="ui checkbox">
    <input type="checkbox">
    <label>Checkbox</label>
  </div>
</div>

How can I achieve this? Is there any hook available for this?

Answer 1

Yes, there is a theme hook that will let you alter every instance of a checkbox. The two theme hooks you'll want to look at are:

1. theme_checkbox() - https://api.drupal.org/api/drupal/includes!form.inc/function/theme_checkbox/7
2. theme_checkboxes() - https://api.drupal.org/api/drupal/includes!form.inc/function/theme_checkboxes/7

Sample Code

Here's some sample code, available in the API doc links I provided above.

function theme_checkbox($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'checkbox';
  element_set_attributes($element, array('id', 'name','#return_value' => 'value'));

  // Unchecked checkbox has #value of integer 0.
  if (!empty($element['#checked'])) {
    $element['#attributes']['checked'] = 'checked';
  }
  _form_set_class($element, array('form-checkbox'));

  return '<input' . drupal_attributes($element['#attributes']) . ' />';
}

You can override the markup returned by implementing this theme hook.