Foundation 5 custom radio and checkboxes

Question

How can I use custom radio buttons and checkboxes in ZURB Foundation 5? It seems like it was easy in ZURB Foundation 4, but can't get the custom radio and checkbox to work.

Answer 1

I don't know what have you been using before but it can be simply done by custom CSS code without JavaScript like this:

SCSS

input {
   &[type=checkbox], &[type=radio] {
      opacity: 0;
      position: absolute;

      &:checked + label:before {
         background: $primary-color;
      }

      & + label:before {
         display: inline-block;
         text-align: center;
         line-height: 1;

         border: 0.0625rem solid $primary-color;
         width: 1rem;
         height: 1rem;
         margin-right: 0.5rem;

         font-size: 0.875rem;
         color: white;
         background: white;
      }
   }

   &[type=checkbox] {
      & + label:before {
         content: "\2715";
         padding-right: 1px;
         border-radius: 0.125rem;
      }
   }

   &[type=radio] {
      & + label:before {
         content: "\2713";
         border-radius: 50%;
      }
   }
}

If you don't want to have any character inside checboxes or radio buttons then put whitespace into content attribute:

[...]

content: " ";

[...]

CodePen playground

Compiled CSS + HTML to show working example

input[type=checkbox],
input[type=radio] {
  opacity: 0;
  position: absolute;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
  background: #007095;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
  display: inline-block;
  text-align: center;
  line-height: 1;
  border: 0.0625rem solid #007095;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  font-size: 0.875rem;
  color: white;
  background: white;
}
input[type=checkbox] + label:before {
  content: "\2715";
  padding-right: 1px;
  border-radius: 0.125rem;
}
input[type=radio] + label:before {
  content: "\2713";
  border-radius: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 column">
    <h3>Radio Button</h3>
    <div class="inline">
      <input type="radio" name="role" value="admin" id="admin" checked />
      <label for="admin">admin</label>
    </div>
    <div class="inline">
      <input type="radio" name="role" value="user" id="user" />
      <label for="user">user</label>
    </div>
  </div>
  <div class="small-12 column" style="margin-top: 10px;">
    <h3>Checkbox</h3>
    <input type="checkbox" id="captcha" checked/>
    <label for="captcha" translate>I am human</label>
  </div>
</div>