# Checkbox & Switch

### 1. Checkbox & Radio

- Ace admin template has support for pure CSS checkbox and on/off switches.
  This makes it more lightweight and there's no need for an external library.
- A basic checkbox element has `.ace` class and a `.lbl` element follows it:

        Optional Text

- It's always a good idea to wrap checkbox element and the `.lbl` element inside a `label` for better click response, except for some cases such as re-styling jqGrid checkboxes (see Notes below)
- You can use an addtional `.ace-checkbox-2` class for another checkbox style:

        Optional Text

- Radio buttons are also styled like checkboxes:

        Optional Text

### 2. Switch elements

- Switch elements are like checkboxes with a few additional classes:
  1. `.ace-switch`
  2. `.ace-switch-2`
  3. `.ace-switch-3`
  4. `.ace-switch-4`
  5. `.ace-switch-5`
  6. `.ace-switch-6`
  7. `.ace-switch-7`

- `.btn-rotate` makes the bars horizontal:

- `.btn-empty` hides the bars:

- `.btn-flat` makes the checkbox rectangular:

- You can have a custom text for switch elements using `data-lbl` attribute of the `.lbl` element.
  You should add enough spaces (&nbsp;) to adjust your custom text:

- You can also edit `assets/css/less/form/checkbox.less` and modify `@switch-1-text` variables and re-compile LESS files into CSS.
- Sometimes your text is not adjusted well. In that case you can override the following CSS rules and find the best values:

      /* for default switch element */
      input[type=checkbox].ace.ace-switch + .lbl::before {
         text-indent: -21px;
      }
      input[type=checkbox].ace.ace-switch:checked + .lbl::before {
         text-indent: 8px;
      }

      /* or other ones */
      input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
         text-indent: -25px;
      }
      input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before {
         text-indent: 9px;
      }

### 3. Notes

- You may face an issue with checkboxes in ASP.NET as there's often a hidden input inserted after the checkbox and therefore our CSS rule which requires `.lbl` to be inserted immediately after checkbox element, fails:

  Checkboxes won't be displayed here.
  You can remove `.ace` class to have default browser checkbox or you can use CSS builder tool and enable ASP.NET friendly checkboxes option.
  Please note that your checkbox element should only have one `.lbl` sibling:

         Will be styled
         This will also be styled with new ASP.net rules!

- It also seems that Rails framework automatically puts a hidden input before the checkbox.
  In some browsers, this may prevent the checkbox from receiving click events if it's inside a label:

  That's because `label` element should only have one input element which in this is the "hidden" input.
  To fix that you can put "hidden" input after checkbox or associate the label to checkbox with "for" attribute and checkbox "id":

- Sometimes you have a list of checkboxes inside a parent with scrollbars.
  In that case, it's better to put checkboxes inside a parent with `position:relative`.
  For example inside a `.pos-rel` element:

        .
        .
        .

- Sometimes you shouldn't wrap the checkbox and `.lbl` inside a label.
  For example in jqGrid plugin, when you launch an "edit record" or "new record" dialog, and want to style the checkbox dynamically:

        form.find('input[type=checkbox]')
            .addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');

  Checkbox should not be wrapped inside `label` because it conflicts with plugin's data upload mechanism.
- For better vertical alignmnet sometimes you should add `.middle` class to `.lbl` element:

### 4. Options

- To add space between checkbox and its label you can use `.padding-*` class for `.lbl` element:
  Padding 16

  Possible values are `.padding-2` `.padding-4` ... `.padding-16`