5 files changed, 85 insertions, 0 deletions
diff --git a/components/radio/_radio.scss b/components/radio/_radio.scss
new file mode 100644
index 0000000..9c51846
--- /dev/null
+++ b/components/radio/_radio.scss
@@ -0,0 +1,69 @@
+.sdc-radio {
+	line-height: 14px;
+
+	label {
+		position: relative;
+		display: block;
+		padding-left: 14px;
+	}
+
+	.sdc-radio__input {
+		appearance: none;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		position: absolute;
+		z-index: -1;
+		opacity: 0;
+
+		// Radio not checked
+		+ .sdc-radio__label:before {
+			display: inline-block;
+			position: absolute;
+			left: 0;
+			top: 0;
+			content: "";
+			width: 14px;
+			height: 14px;
+			box-sizing: content-box;
+			background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+		}
+
+		// Radio disabled and not checked
+		&:disabled:not(:checked) {
+			+ .sdc-radio__label:before {
+				background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+			}
+		}
+
+		&:checked {
+			// Radio checked
+			+ .sdc-radio__label:before {
+				background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23009fdb%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23009fdb%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+			}
+
+			// Radio disabled and checked
+			&:disabled {
+				+ .sdc-radio__label:before {
+					background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23d2d2d2%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+				}
+			}
+		}
+
+		&:not(:disabled) {
+			+ .sdc-radio__label {
+				cursor: pointer;
+			}
+		}
+
+		&:disabled {
+			+ .sdc-radio__label {
+				color: $gray;
+			}
+		}
+	}
+
+	.sdc-radio__label:not(:empty) {
+		padding-left: 14px;
+		@include body-1;
+	}
+}
diff --git a/components/radio/radio-checked.html b/components/radio/radio-checked.html
new file mode 100644
index 0000000..78283b3
--- /dev/null
+++ b/components/radio/radio-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+    <input type="radio" name="grp1" checked class="sdc-radio__input" value="1">
+    <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled-checked.html b/components/radio/radio-disabled-checked.html
new file mode 100644
index 0000000..9ba6f0c
--- /dev/null
+++ b/components/radio/radio-disabled-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+    <input type="radio" name="grp3" checked class="sdc-radio__input" value="1" disabled>
+    <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled.html b/components/radio/radio-disabled.html
new file mode 100644
index 0000000..332435f
--- /dev/null
+++ b/components/radio/radio-disabled.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+    <input type="radio" name="grp2" class="sdc-radio__input" value="1" disabled>
+    <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-unchecked.html b/components/radio/radio-unchecked.html
new file mode 100644
index 0000000..6f6a00d
--- /dev/null
+++ b/components/radio/radio-unchecked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+    <input type="radio" name="grp4" class="sdc-radio__input" value="1">
+    <label class="sdc-radio__label">This is the radio label</label>
+</div>