<article class="theme-light preload">
  <div class="center">
    <div class="row">
      <p>Radio</p>
    </div>

    <div class="row">
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-none" checked>
          <span class="input__box"></span>
          <span>default 1</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-none">
          <span class="input__box"></span>
          <span>default 2</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-none">
          <span class="input__box"></span>
          <span>default 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--light-primary" checked>
          <span class="input__box"></span>
          <span>primary 1</span>
        </label>
      </div>
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--light-primary">
          <span class="input__box"></span>
          <span>primary 2</span>
        </label>
      </div>
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--light-primary">
          <span class="input__box"></span>
          <span>primary 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--light-secondary" checked>
          <span class="input__box"></span>
          <span>secondary 1</span>
        </label>
      </div>
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--light-secondary">
          <span class="input__box"></span>
          <span>secondary 2</span>
        </label>
      </div>
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--light-secondary">
          <span class="input__box"></span>
          <span>secondary 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--light-success" checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--light-success">
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--light-success">
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--light-danger" checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--light-danger">
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--light-danger">
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-disabled" disabled checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-disabled" disabled>
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--light-disabled" disabled>
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--xsmall">
        <label>
          <input type="radio" name="radio--light-sizes" checked>
          <span class="input__box"></span>
          <span>xsmall 1</span>
        </label>
      </div>
      <div class="input input--radio input--small">
        <label>
          <input type="radio" name="radio--light-sizes">
          <span class="input__box"></span>
          <span>small 2</span>
        </label>
      </div>
      <div class="input input--radio input--large">
        <label>
          <input type="radio" name="radio--light-sizes">
          <span class="input__box"></span>
          <span>large 3</span>
        </label>
      </div>
    </div>
  </div>
</article>

<article class="theme-dark preload">
  <div class="center">
    <div class="row">
      <p>Radio</p>
    </div>

    <div class="row">
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-none" checked>
          <span class="input__box"></span>
          <span>default 1</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-none">
          <span class="input__box"></span>
          <span>default 2</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-none">
          <span class="input__box"></span>
          <span>default 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--dark-primary" checked>
          <span class="input__box"></span>
          <span>primary 1</span>
        </label>
      </div>
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--dark-primary">
          <span class="input__box"></span>
          <span>primary 2</span>
        </label>
      </div>
      <div class="input input--radio input--primary">
        <label>
          <input type="radio" name="radio--dark-primary">
          <span class="input__box"></span>
          <span>primary 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--dark-secondary" checked>
          <span class="input__box"></span>
          <span>secondary 1</span>
        </label>
      </div>
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--dark-secondary">
          <span class="input__box"></span>
          <span>secondary 2</span>
        </label>
      </div>
      <div class="input input--radio input--secondary">
        <label>
          <input type="radio" name="radio--dark-secondary">
          <span class="input__box"></span>
          <span>secondary 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--dark-success" checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--dark-success">
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio input--success">
        <label>
          <input type="radio" name="radio--dark-success">
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--dark-danger" checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--dark-danger">
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio input--danger">
        <label>
          <input type="radio" name="radio--dark-danger">
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-disabled" disabled checked>
          <span class="input__box"></span>
          <span>option 1</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-disabled" disabled>
          <span class="input__box"></span>
          <span>option 2</span>
        </label>
      </div>
      <div class="input input--radio">
        <label>
          <input type="radio" name="radio--dark-disabled" disabled>
          <span class="input__box"></span>
          <span>option 3</span>
        </label>
      </div>
    </div>

    <div class="row">
      <div class="input input--radio input--xsmall">
        <label>
          <input type="radio" name="radio--dark-sizes" checked>
          <span class="input__box"></span>
          <span>xsmall 1</span>
        </label>
      </div>
      <div class="input input--radio input--small">
        <label>
          <input type="radio" name="radio--dark-sizes">
          <span class="input__box"></span>
          <span>small 2</span>
        </label>
      </div>
      <div class="input input--radio input--large">
        <label>
          <input type="radio" name="radio--dark-sizes">
          <span class="input__box"></span>
          <span>large 3</span>
        </label>
      </div>
    </div>
  </div>
</article>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>
:root {
  --theme-light--color-bg: #f9fafa;
  --theme-light--color-font: #42494f;
  --theme-light--color-border: rgba(0, 0, 0, .08627);
  --theme-light--color-default: #fff;
  --theme-light--color-primary: #6bbaf0;
  --theme-light--color-secondary: #89949b;
  --theme-light--color-success: #a0bf69;
  --theme-light--color-danger: #cc6164;
  --theme-light--color-line-default: #42494f;
  --theme-light--color-line-primary: #fff;
  --theme-light--color-line-secondary: #fff;
  --theme-light--color-line-success: #fff;
  --theme-light--color-line-danger: #fff;
  --theme-dark--color-bg: #42494f;
  --theme-dark--color-font: #f9fafa;
  --theme-dark--color-border: hsla(0, 0%, 100%, .08627);
  --theme-dark--color-default: #3a3f47;
  --theme-dark--color-primary: #6bbaf0;
  --theme-dark--color-primary: var(--theme-light--color-primary);
  --theme-dark--color-secondary: #22292f;
  --theme-dark--color-success: #a0bf69;
  --theme-dark--color-success: var(--theme-light--color-success);
  --theme-dark--color-danger: #cc6164;
  --theme-dark--color-danger: var(--theme-light--color-danger);
  --theme-dark--color-line-default: #f9fafa;
  --theme-dark--color-line-primary: #fff;
  --theme-dark--color-line-secondary: #fff;
  --theme-dark--color-line-success: #fff;
  --theme-dark--color-line-danger: #fff;
  --input-color: #fff;
  --input-color: var(--theme-light--color-default);
  --input-color--bg: #f9fafa;
  --input-color--bg: var(--theme-light--color-bg);
  --input-color--font: #42494f;
  --input-color--font: var(--theme-light--color-font);
  --input-color--border: rgba(0, 0, 0, .08627);
  --input-color--border: var(--theme-light--color-border);
  --input-size--large: 13px;
  --input-size--default: 11px;
  --input-size--small: 9px;
  --input-size--xsmall: 8px;
  --input-size: 11px;
  --input-size: var(--input-size--default)
}

.theme-light {
  --input-color: #fff;
  --input-color: var(--theme-light--color-default);
  --input-color--line: #42494f;
  --input-color--line: var(--theme-light--color-line-default);
  --input-color--default: #fff;
  --input-color--default: var(--theme-light--color-default);
  --input-color--bg: #f9fafa;
  --input-color--bg: var(--theme-light--color-bg);
  --input-color--font: #42494f;
  --input-color--font: var(--theme-light--color-font);
  --input-color--border: rgba(0, 0, 0, .08627);
  --input-color--border: var(--theme-light--color-border)
}

.theme-light .input--primary {
  --input-color: #6bbaf0;
  --input-color: var(--theme-light--color-primary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-primary)
}

.theme-light .input--secondary {
  --input-color: #89949b;
  --input-color: var(--theme-light--color-secondary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-secondary)
}

.theme-light .input--success {
  --input-color: #a0bf69;
  --input-color: var(--theme-light--color-success);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-success)
}

.theme-light .input--danger {
  --input-color: #cc6164;
  --input-color: var(--theme-light--color-danger);
  --input-color--line: #fff;
  --input-color--line: var(--theme-light--color-line-danger)
}

.theme-dark {
  --input-color: #3a3f47;
  --input-color: var(--theme-dark--color-default);
  --input-color--line: #f9fafa;
  --input-color--line: var(--theme-dark--color-line-default);
  --input-color--default: #3a3f47;
  --input-color--default: var(--theme-dark--color-default);
  --input-color--bg: #42494f;
  --input-color--bg: var(--theme-dark--color-bg);
  --input-color--font: #f9fafa;
  --input-color--font: var(--theme-dark--color-font);
  --input-color--border: hsla(0, 0%, 100%, .08627);
  --input-color--border: var(--theme-dark--color-border)
}

.theme-dark .input--primary {
  --input-color: #6bbaf0;
  --input-color: var(--theme-dark--color-primary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-primary)
}

.theme-dark .input--secondary {
  --input-color: #22292f;
  --input-color: var(--theme-dark--color-secondary);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-secondary)
}

.theme-dark .input--success {
  --input-color: #a0bf69;
  --input-color: var(--theme-dark--color-success);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-success)
}

.theme-dark .input--danger {
  --input-color: #cc6164;
  --input-color: var(--theme-dark--color-danger);
  --input-color--line: #fff;
  --input-color--line: var(--theme-dark--color-line-danger)
}

.input {
  display: inline;
  font-size: 11px;
  font-size: var(--input-size--default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #42494f;
  color: var(--input-color--font);
  --input-size: 11px;
  --input-size: var(--input-size--default)
}

.input.input--large {
  --input-size: 13px;
  --input-size: var(--input-size--large)
}

.input.input--small {
  --input-size: 9px;
  --input-size: var(--input-size--small)
}

.input.input--xsmall {
  --input-size: 8px;
  --input-size: var(--input-size--xsmall)
}

.input label {
  text-align: left
}

.input__box {
  display: inline-block;
  width: 11px;
  width: var(--input-size);
  height: 11px;
  height: var(--input-size);
  margin-right: 7px;
  margin-right: calc(18px - var(--input-size));
  background-color: var(--input-color--default);
  border-color: rgba(0, 0, 0, .08627);
  border: 1px solid var(--input-color--border);
  vertical-align: -2.75px;
  vertical-align: calc((var(--input-size--default) - var(--input-size)) / 2 - var(--input-size--default) / 4);
  -webkit-transition: background-color .1s ease;
  transition: background-color .1s ease;
  -webkit-transition-delay: .05s;
  transition-delay: .05s
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
  40% {
    -webkit-transform: scale(1.1, .9) rotate(5deg);
    transform: scale(1.1, .9) rotate(5deg)
  }
  70% {
    -webkit-transform: scale(.9, 1.1) rotate(-3deg);
    transform: scale(.9, 1.1) rotate(-3deg)
  }
  80% {
    -webkit-transform: scale(1.05, .95) rotate(1deg);
    transform: scale(1.05, .95) rotate(1deg)
  }
  to {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
  40% {
    -webkit-transform: scale(1.1, .9) rotate(5deg);
    transform: scale(1.1, .9) rotate(5deg)
  }
  70% {
    -webkit-transform: scale(.9, 1.1) rotate(-3deg);
    transform: scale(.9, 1.1) rotate(-3deg)
  }
  80% {
    -webkit-transform: scale(1.05, .95) rotate(1deg);
    transform: scale(1.05, .95) rotate(1deg)
  }
  to {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg)
  }
}

.preload * {
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important
}

.input--radio {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.input--radio input {
  display: none
}

.input--radio .input__box {
  border-radius: 11px;
  border-radius: var(--input-size);
  opacity: .9;
  position: relative;
  overflow: hidden
}

.input--radio .input__box:after,
.input--radio .input__box:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 38% 38%;
  transform-origin: 38% 38%;
  -webkit-transform: scale(0);
  transform: scale(0);
  width: 11px;
  width: var(--input-size);
  height: 11px;
  height: var(--input-size);
  border: 1px solid transparent;
  border-radius: 11px;
  border-radius: var(--input-size);
  -webkit-transition: transform .2s ease;
  transition: transform .2s ease
}

.input--radio .input__box:before {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  background-color: #fff;
  background-color: var(--input-color)
}

.input--radio .input__box:after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  background-color: var(--input-color--line)
}

.input--radio label {
  cursor: pointer
}

.input--radio label:hover .input__box {
  opacity: 1
}

.input--radio input:checked+.input__box {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation-name: wobble;
  animation-name: wobble;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease
}

.input--radio input:checked+.input__box:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.input--radio input:checked+.input__box:after {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  -webkit-transform: scale(.33);
  transform: scale(.33)
}

.input--radio input:disabled+.input__box,
.input--radio input:disabled+.input__box+span {
  opacity: .5
}

body,
html {
  padding: 0;
  margin: 0
}

article {
  font-family: Gotham Rounded SSm A, Gotham Rounded SSm B, Gotham Rounded A, Gotham Rounded B, proxima-nova-soft, Verdana, Geneva, sans-serif;
  color: #42494f;
  color: var(--input-color--font);
  background: #f9fafa;
  background: var(--input-color--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50%;
  float: left;
  text-align: center;
  height: 100vh
}

article p {
  margin-top: 32px;
  margin-top: 2rem
}

article span {
  display: inline-block;
  width: 75px
}

article .row {
  margin: 15px 0
}

.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
.dribbble img {
  display: block;
  height: 28px;
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
.twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
// See https://github.com/tamino-martinius/ui-snippets-radiobuttons for Source Files build with webpack
// See https://github.com/tamino-martinius/ui-snippets-template for Snippet Template

const $inputs = document.getElementsByClassName('input');
for (let inputIndex = $inputs.length - 1; inputIndex >= 0; inputIndex--) {
  const $input = $inputs[inputIndex];
  // ...
}
const $radiobuttons = document.getElementsByClassName('input--radio');
for (let radioIndex = $radiobuttons.length - 1; radioIndex >= 0; radioIndex--) {
  const $radio = $radiobuttons[radioIndex];
  // ...
}
setTimeout(() => { /* TODO: prevent this timeout */
  const $preloadElements = document.getElementsByClassName('preload');
  for (let preloadIndex = $preloadElements.length - 1; preloadIndex >= 0; preloadIndex--) {
    const $preload = $preloadElements[preloadIndex];
    $preload.classList.remove('preload');
  }
}, 500);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.