forms 2

src/_blocks_library.html

@@ -267,7 +267,9 @@
         <input type="file">
       </fieldset>
     </form>
+
     <h2 id="form-style">Стилизованные формы</h2>
+
     <p>Стилизация: БЭМ-блоки <code>.field</code>, <code>.form</code> и модификаторы. Опирается на стилизацию форм по умолчанию.</p>
     <div class="row">
       <div class="col-md-6">
@@ -288,6 +290,31 @@
                 <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
               </div>
             </label>
+            <label class="field">
+              <div class="field__name">Название поля</div>
+              <div class="field__input-wrap">
+                <textarea class="field__input" rows="3" placeholder="textarea"></textarea>
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <div class="field  field--checkbox">
+              <div class="field__input-wrap">
+                <label class="field__name">
+                  <input class="field__input" type="checkbox">
+                  Чекбокс, более известный как флажок
+                </label>
+                <div class="field__help-text">Пояснительный тест.</div>
+              </div>
+            </div>
+            <div class="field  field--radio">
+              <div class="field__input-wrap">
+                <label class="field__name">
+                  <input class="field__input" type="radio">
+                  Радиобатон
+                </label>
+                <div class="field__help-text">Пояснительный тест.</div>
+              </div>
+            </div>
             <label class="field">
               <div class="field__name">Название поля</div>
               <div class="field__input-wrap">
@@ -302,6 +329,13 @@
                 <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
               </div>
             </label>
+            <label class="field">
+              <div class="field__name">Название поля</div>
+              <div class="field__input-wrap">
+                <input class="field__input" type="file">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
             <label class="field  field--error">
               <div class="field__name">Ошибочное поле</div>
               <div class="field__input-wrap">

src/less/blocks/field.less

@@ -26,6 +26,16 @@
     }
   }
 
+  &--checkbox,
+  &--radio {
+    .field__name {
+      display: inline-block;
+      font-weight: inherit;
+      font-family: inherit;
+      margin-bottom: 0;
+    }
+  }
+
   &__name {
     font-weight: 700;
     display: block;