Work on radio input

form/form.html

@@ -16,47 +16,39 @@
     <div class="form__field">
       <div class="field" id="input-text">
         <label class="field__label" for="text">Text</label>
-        <div class="field__input">
-          <input class="input" type="text" name="text" label="Text">
-        </div>
+        <input class="field__input input" type="text" name="text" label="Text">
         <p class="field__error-help-msg"></p>
       </div>
     </div>
     <div class="form__field">
       <div class="field" id="input-radio">
         <label class="field__label" for="radio">Radio</label>
-        <div class="field__input">
-          <div class="radio">
-            <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 class="field__input radio radio--grid">
+          <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>
         <p class="field__error-help-msg"></p>
       </div>
     </div>
     <div class="form__field">
       <div class="field" id="input-select">
         <label class="field__label" for="select">Select</label>
-        <div class="field__input">
-          <select class="select" id="select" name="select">
-            <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>
-          </select>
-        </div>
+        <select class="field__input select" id="select" name="select">
+          <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>
+        </select>
         <p class="field__error-help-msg"></p>
       </div>
     </div>
     <div class="form__field">
       <div class="field" id="input-textarea">
         <label class="field__label" for="textarea">Textarea</label>
-        <div class="field__input">
-          <textarea id="textarea" class="input" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
-        </div>
+        <textarea class="field__input input" id="textarea" type="textarea" name="text" label="Texte" placeholder="Ajouter une note"></textarea>
         <p class="field__error-help-msg"></p>
       </div>
     </div>

form/notes.md

@@ -1,3 +1,11 @@
 # Notes
 
-By default only the button stretches across the whole container.
+* By default only the submit button stretches across the whole container.
+
+  * This is because the input with class `.field__input` has to be a DIRECT
+  child of the `.field` container. This also applies to select/textarea/..
+
+* With `align-items` set to `center`, the label is always centered vertically,
+which looks bad with radio / textarea inputs. The solution could be to either
+add modifiers to `field__label` class or use sibling selectors
+[see here](https://www.sitepoint.com/make-forms-fun-with-flexbox/).

form/style.css

@@ -39,4 +39,43 @@ body {
 .field__input {
   flex: 2;
   background-color: var(--color-input);
+}
+
+.select {
+
+}
+
+.select__option {
+
+}
+
+.radio {
+
+}
+
+/* With this setting all the options are lined horizontally */
+.radio--inline {
+  display: flex;
+}
+
+.radio--inline .radio__option {
+  flex: none;
+}
+
+.radio--inline .radio__label {
+  flex: 1;
+}
+
+.radio--grid {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: start;
+}
+
+.radio--grid .radio__option {
+  grid-column: 1;
+}
+
+.radio--grid .radio__label {
+  grid-column: 2;
 }