vue-radio-checkbox

A set of custom radio and checkbox components for Vue.js

Example

Here is a demo using the styling below:

Installation

npm install vue-radio-checkbox

These components are tied to the Vue window object, so all you need to do is require them where they have access to the window.Vue object.

require('vue-radio-checkbox');

Using the checkbox

<checkbox name="subscribe" value="1" label="Newsletter Sign Up" v-model="someBool"></checkbox>

This will set someBool to the state of the checked attribute.

Full example:

<checkbox name="email_subscribe" id="email-check" className="another-class" value="1" label="Newsletter Sign Up" v-bind:inverted="false" v-model="someBool" v-bind:checked="someBool" v-bind:required="true"></checkbox>

Using the radio

<radio name="method" value="phone" label="Phone"></radio>
<radio name="method" value="email" label="Email"></radio>

Full example:

<radio name="method" id="phone-method-check" value="phone" label="Phone" v-bind:inverted="true" v-bind:checked="false" v-bind:required="true"></radio>
<radio name="method" id="email-method-check" value="email" label="Email" v-bind:inverted="true" v-bind:checked="false" v-bind:required="true"></radio>

Events

Both the radio and checkbox can emit input events. Those are used like so:

<checkbox name="subscribe" value="1" label="Newsletter Sign Up" v-on:input="someMethodInYourApp"></checkbox>

This allows you to have things happen when the elements change/update. An example might be having different elements show or hide, or triggering another change on some other property.

Styling

// all boxes and radios have these parent wrappers 
.custom-checkbox, .custom-radio {
  // easy inline labels 
  display: flex;
  input[type=checkbox], input[type=radio], label {
    // dont highlight text when double clicking 
    user-select: none;
  }
  input[type=checkbox], input[type=radio] {
    position: relative;
    border: 1px solid blue;
    margin: 0 0.2em 0 0;
    padding: 0;
    text-align: center;
    width: 1.3rem;
    height: 1.3rem;
    background: white;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: rgba(white, 0);
    transition: all 0.2s ease;
    // Better Font Rendering 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &:before {
      // checkmark 
      content: "✔";
    }
    &:focus {
      outline: 0;
      border: 1px solid darken(blue, 5%);
    }
    &:active {
      outline: none;
    }
    &:hover {
      outline: none;
    }
    &:checked {
      background: blue;
      // the color is what hides the checkmark 
      color: rgba(white, 1);
    }
  }
  // an `inverted` class is there for making simple alternative styles 
  &.inverted {
    input[type=checkbox], input[type=radio] {
      border: 1px solid black;
      &:focus {
        border: 1px solid darken(black, 5%);
      }
      &:checked {
        background: black;
      }
    }
  }
}