vue-checkbox-radio demo

🍕 Pizza 🍔 Hamburger

Value: {{ checkboxValue }} 

<checkbox name="food[]" value="pizza" v-model="checkboxValue" checked>
    🍕 Pizza
</checkbox>
<checkbox name="food[]" value="hamburger" v-model="checkboxValue">
    🍔 Hamburger
</checkbox>
I'm a robot 🤖 I'm not a robot

Value: {{ radioValue }} 

<radio name="robot" value="yes" v-model="radioValue" checked>
    I'm a robot 🤖
</radio>
<radio name="robot" value="no" v-model="radioValue">
    I'm not a robot
</radio>

Style examples

Color

🍕 Pizza 🍔 Hamburger
I'm a robot 🤖 I'm not a robot 
.checkbox-component > input + label > .input-box,
.radio-component > input + label > .input-box {
  border-color: #4d82ff;
  background: #4d82ff;
}
.checkbox-component > input + label > .input-box > .input-box-tick > path {
  stroke: #fff;
}
.radio-component > input + label > .input-box > .input-box-circle {
  background: #fff;
}

Switcher

🍕 Pizza 🍔 Hamburger
I'm a robot 🤖 I'm not a robot 
.checkbox-component > input + label > .input-box,
.radio-component > input + label > .input-box {
  position: relative;
  border: 1px solid #939393;
  border-radius: 1em;
  width: 1.6em;
  background: #fff;
  transition: background 0.2s ease-in;
  vertical-align: -15%;
}
.checkbox-component > input + label > .input-box > .input-box-tick,
.radio-component > input + label > .input-box > .input-box-circle {
  display: none;
}
.checkbox-component > input + label > .input-box:before,
.radio-component > input + label > .input-box:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  border: 1px solid #939393;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  background: #fff;
  transition: transform 0.3s ease-out;
}
.checkbox-component > input:checked + label > .input-box,
.radio-component > input:checked + label > .input-box {
  background: #63b65d;
}
.checkbox-component > input:checked + label > .input-box:before,
.radio-component > input:checked + label > .input-box:before {
  border-color: #498d47;
  transform: translateX(0.6em);
}

Image

🍕 Pizza 🍔 Hamburger
I'm a robot 🤖 I'm not a robot 

.checkbox-component > input + label > .input-box > .input-box-tick,
.radio-component > input + label > .input-box > .input-box-circle {
  display: none;
}
.checkbox-component > input:checked + label > .input-box,
.radio-component > input:checked + label > .input-box {
  background: url("tick.png") no-repeat center center;
  background-size: 100% 100%;
}

Character

🍕 Pizza 🍔 Hamburger
I'm a robot 🤖 I'm not a robot 
.checkbox-component > input + label > .input-box,
.radio-component > input + label > .input-box {
  font-size: 1em;
  text-align: center;
  line-height: 1;
  color: transparent;
}
.checkbox-component > input + label > .input-box > .input-box-tick,
.radio-component > input + label > .input-box > .input-box-circle {
  display: none;
}
.checkbox-component > input + label > .input-box:before,
.radio-component > input + label > .input-box:before {
  content: '✘';
}
.checkbox-component > input:checked + label > .input-box:before,
.radio-component > input:checked + label > .input-box:before {
  color: #000;
}