<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.