Add radio input

form/form.html

@@ -176,6 +176,7 @@
       <div class="field" id="input-select">
         <label class="field__label" for="select">Select</label>
         <select class="field__input select" id="select" name="select">
+          <option class="select__option" value="" default disabled>Select an option</option>
           <option class="select__option" value="option-1">Option 1</option>
           <option class="select__option" value="option-2">Option 2</option>
           <option class="select__option" value="option-3">Option 3</option>
@@ -191,6 +192,7 @@
       <div class="field" id="input-select">
         <label class="field__label" for="select">Select multiple</label>
         <select class="field__input select" id="select" name="select" multiple>
+          <option class="select__option" value="" default></option>
           <option class="select__option" value="option-1">Option 1</option>
           <option class="select__option" value="option-2">Option 2</option>
           <option class="select__option" value="option-3">Option 3</option>
@@ -226,6 +228,22 @@
     <button class="form__submit button button--inline button--danger" type="submit">×</button>
   </form>
 
+  <h1>Radio input</h1>
+  <form class="form form--full-page" action="#" method="post">
+    <h1 class="form__title">Form title</h1>
+    <div class="form__field field field--grid" id="input-radio">
+      <label class="field__label" for="radio">Radio</label>
+      <div class="field__input radio radio--buttons">
+        <input class="radio__option" type="radio" value="Option 1" name="radio" id="option-1">
+        <label class="radio__label" for="option-1">Option 1</label>
+        <input class="radio__option" type="radio" value="Option 2" name="radio" id="option 2">
+        <label class="radio__label" for="option-2">Option 2</label>
+        <input class="radio__option" type="radio" value="Option 3" name="radio" id="option-3">
+        <label class="radio__label" for="option-3">Option 3</label>
+      </div>
+    </div>
+    <button class="form__submit button button-success" type="submit">Go</button>
+  </form>
   <br>
   <br>
 </body>

form/radio.css

@@ -1,7 +1,16 @@
+input[type="radio"] {
+  all: unset;
+}
+
 .radio {
 
 }
 
+.radio--buttons {
+  display: inline-flex;
+
+}
+
 /* With this setting all the options are lined horizontally */
 .radio--inline {
   display: flex;
@@ -11,6 +20,10 @@
   flex: none;
 }
 
+.radio--buttons .radio__option {
+  flex: none;
+}
+
 .radio--inline .radio__label {
   flex: 1;
 }