Add field element

docs/css/bulma-docs.css

@@ -1800,7 +1800,7 @@ a.box:active {
 .help {
   display: block;
   font-size: 0.85rem;
-  margin-top: 5px;
+  margin-top: 0.25rem;
 }
 
 .help.is-white {
@@ -1839,111 +1839,136 @@ a.box:active {
   color: #ff3860;
 }
 
-@media screen and (max-width: 768px) {
-  .control-label {
-    margin-bottom: 0.5em;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .control-label {
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    margin-right: 1.5em;
-    padding-top: 0.5em;
-    text-align: right;
-  }
-}
-
-.control {
-  position: relative;
-  text-align: left;
-}
-
-.control:not(:last-child) {
+.field:not(:last-child) {
   margin-bottom: 0.75rem;
 }
 
-.control.has-addons {
+.field.has-addons {
   display: flex;
   justify-content: flex-start;
 }
 
-.control.has-addons .button,
-.control.has-addons .input,
-.control.has-addons .select {
-  border-radius: 0;
+.field.has-addons .control {
   margin-right: -1px;
-  width: auto;
 }
 
-.control.has-addons .button:hover,
-.control.has-addons .input:hover,
-.control.has-addons .select:hover {
+.field.has-addons .control:hover {
   z-index: 2;
 }
 
-.control.has-addons .button:focus, .control.has-addons .button:active,
-.control.has-addons .input:focus,
-.control.has-addons .input:active,
-.control.has-addons .select:focus,
-.control.has-addons .select:active {
+.field.has-addons .control:focus, .field.has-addons .control:active {
   z-index: 3;
 }
 
-.control.has-addons .button:first-child,
-.control.has-addons .input:first-child,
-.control.has-addons .select:first-child {
-  border-radius: 3px 0 0 3px;
+.field.has-addons .control:first-child .button,
+.field.has-addons .control:first-child .input,
+.field.has-addons .control:first-child .select select {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
 }
 
-.control.has-addons .button:first-child select,
-.control.has-addons .input:first-child select,
-.control.has-addons .select:first-child select {
-  border-radius: 3px 0 0 3px;
+.field.has-addons .control:last-child .button,
+.field.has-addons .control:last-child .input,
+.field.has-addons .control:last-child .select select {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
 }
 
-.control.has-addons .button:last-child,
-.control.has-addons .input:last-child,
-.control.has-addons .select:last-child {
-  border-radius: 0 3px 3px 0;
+.field.has-addons .control .button,
+.field.has-addons .control .input,
+.field.has-addons .control .select select {
+  border-radius: 0;
 }
 
-.control.has-addons .button:last-child select,
-.control.has-addons .input:last-child select,
-.control.has-addons .select:last-child select {
-  border-radius: 0 3px 3px 0;
+.field.has-addons .control.is-expanded {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.field.has-addons.has-addons-centered {
+  justify-content: center;
+}
+
+.field.has-addons.has-addons-right {
+  justify-content: flex-end;
 }
 
-.control.has-addons .button.is-expanded,
-.control.has-addons .input.is-expanded,
-.control.has-addons .select.is-expanded {
+.field.has-addons.has-addons-fullwidth .control {
   flex-grow: 1;
   flex-shrink: 0;
 }
 
-.control.has-addons .select select:hover {
-  z-index: 2;
+.field.is-grouped {
+  display: flex;
+  justify-content: flex-start;
 }
 
-.control.has-addons .select select:focus, .control.has-addons .select select:active {
-  z-index: 3;
+.field.is-grouped > .control {
+  flex-basis: 0;
+  flex-shrink: 0;
 }
 
-.control.has-addons.has-addons-centered {
+.field.is-grouped > .control:not(:last-child) {
+  margin-bottom: 0;
+  margin-right: 0.75rem;
+}
+
+.field.is-grouped > .control.is-expanded {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.field.is-grouped.is-grouped-centered {
   justify-content: center;
 }
 
-.control.has-addons.has-addons-right {
+.field.is-grouped.is-grouped-right {
   justify-content: flex-end;
 }
 
-.control.has-addons.has-addons-fullwidth .button,
-.control.has-addons.has-addons-fullwidth .input,
-.control.has-addons.has-addons-fullwidth .select {
-  flex-grow: 1;
-  flex-shrink: 0;
+@media screen and (min-width: 769px) {
+  .field.is-horizontal {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .field-label {
+    margin-bottom: 0.5rem;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .field-label {
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-right: 1.5rem;
+    padding-top: 0.375em;
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .field-body {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
+  }
+  .field-body .field {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .field-body .field:not(:last-child) {
+    margin-bottom: 0;
+    margin-right: 0.75rem;
+  }
+}
+
+.control {
+  position: relative;
+  text-align: left;
 }
 
 .control.has-icon .icon {
@@ -1988,46 +2013,6 @@ a.box:active {
   padding-right: 2.25em;
 }
 
-.control.is-grouped {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.control.is-grouped > .control {
-  flex-basis: 0;
-  flex-shrink: 0;
-}
-
-.control.is-grouped > .control:not(:last-child) {
-  margin-bottom: 0;
-  margin-right: 0.75rem;
-}
-
-.control.is-grouped > .control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.control.is-grouped.is-grouped-centered {
-  justify-content: center;
-}
-
-.control.is-grouped.is-grouped-right {
-  justify-content: flex-end;
-}
-
-@media screen and (min-width: 769px) {
-  .control.is-horizontal {
-    display: flex;
-  }
-  .control.is-horizontal > .control {
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 5;
-    flex-shrink: 1;
-  }
-}
-
 .control.is-loading:after {
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
@@ -2040,8 +2025,8 @@ a.box:active {
   position: relative;
   width: 1rem;
   position: absolute !important;
-  right: 0.75em;
-  top: 0.75em;
+  right: 0.625em;
+  top: 0.625em;
 }
 
 .icon {

docs/documentation/elements/form.html

@@ -32,55 +32,76 @@ doc-subtab: form
 
 {% capture form_example %}
 <label class="label">Name</label>
-<p class="control">
-  <input class="input" type="text" placeholder="Text input">
-</p>
-<label class="label">Username</label>
-<p class="control has-icon has-icon-right">
-  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
-  <span class="icon is-small">
-    <i class="fa fa-check"></i>
-  </span>
-  <span class="help is-success">This username is available</span>
-</p>
-<label class="label">Email</label>
-<p class="control has-icon has-icon-right">
-  <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
-  <span class="icon is-small">
-    <i class="fa fa-warning"></i>
-  </span>
-  <span class="help is-danger">This email is invalid</span>
-</p>
-<label class="label">Subject</label>
-<p class="control">
-  <span class="select">
-    <select>
-      <option>Select dropdown</option>
-      <option>With options</option>
-    </select>
-  </span>
-</p>
-<label class="label">Message</label>
-<p class="control">
-  <textarea class="textarea" placeholder="Textarea"></textarea>
-</p>
-<p class="control">
-  <label class="checkbox">
-    <input type="checkbox">
-    Remember me
-  </label>
-</p>
-<p class="control">
-  <label class="radio">
-    <input type="radio" name="question">
-    Yes
-  </label>
-  <label class="radio">
-    <input type="radio" name="question">
-    No
-  </label>
-</p>
-<div class="control is-grouped">
+<div class="field">
+  <p class="control">
+    <input class="input" type="text" placeholder="Text input">
+  </p>
+</div>
+
+<div class="field">
+  <label class="label">Username</label>
+  <p class="control has-icon has-icon-right">
+    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
+    <span class="icon is-small">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+  <p class="help is-success">This username is available</p>
+</div>
+
+<div class="field">
+  <label class="label">Email</label>
+  <p class="control has-icon has-icon-right">
+    <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
+    <span class="icon is-small">
+      <i class="fa fa-warning"></i>
+    </span>
+  </p>
+  <p class="help is-danger">This email is invalid</p>
+</div>
+
+<div class="field">
+  <label class="label">Subject</label>
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+  </p>
+</div>
+
+<div class="field">
+  <label class="label">Message</label>
+  <p class="control">
+    <textarea class="textarea" placeholder="Textarea"></textarea>
+  </p>
+</div>
+
+<div class="field">
+  <p class="control">
+    <label class="checkbox">
+      <input type="checkbox">
+      Remember me
+    </label>
+  </p>
+</div>
+
+<div class="field">
+  <p class="control">
+    <label class="radio">
+      <input type="radio" name="question">
+      Yes
+    </label>
+    <label class="radio">
+      <input type="radio" name="question">
+      No
+    </label>
+  </p>
+</div>
+
+<div class="field is-grouped">
   <p class="control">
     <button class="button is-primary">Submit</button>
   </p>
@@ -105,21 +126,31 @@ doc-subtab: form
 
     <h3 class="title">Colors</h3>
 {% capture colors_example %}
-<p class="control">
-  <input class="input is-primary" type="text" placeholder="Primary input">
-</p>
-<p class="control">
-  <input class="input is-info" type="text" placeholder="Info input">
-</p>
-<p class="control">
-  <input class="input is-success" type="text" placeholder="Success input">
-</p>
-<p class="control">
-  <input class="input is-warning" type="text" placeholder="Warning input">
-</p>
-<p class="control">
-  <input class="input is-danger" type="text" placeholder="Danger input">
-</p>
+<div class="field">
+  <p class="control">
+    <input class="input is-primary" type="text" placeholder="Primary input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-info" type="text" placeholder="Info input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-success" type="text" placeholder="Success input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-warning" type="text" placeholder="Warning input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-danger" type="text" placeholder="Danger input">
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -135,50 +166,66 @@ doc-subtab: form
     <hr>
 
 {% capture sizes_example %}
-<p class="control">
-  <input class="input is-small" type="text" placeholder="Small input">
-</p>
-<p class="control">
-  <input class="input" type="text" placeholder="Normal input">
-</p>
-<p class="control">
-  <input class="input is-medium" type="text" placeholder="Medium input">
-</p>
-<p class="control">
-  <input class="input is-large" type="text" placeholder="Large input">
-</p>
-<p class="control">
-  <span class="select is-small">
-    <select>
-      <option>Select dropdown</option>
-      <option>With options</option>
-    </select>
-  </span>
-</p>
-<p class="control">
-  <span class="select">
-    <select>
-      <option>Select dropdown</option>
-      <option>With options</option>
-    </select>
-  </span>
-</p>
-<p class="control">
-  <span class="select is-medium">
-    <select>
-      <option>Select dropdown</option>
-      <option>With options</option>
-    </select>
-  </span>
-</p>
-<p class="control">
-  <span class="select is-large">
-    <select>
-      <option>Select dropdown</option>
-      <option>With options</option>
-    </select>
-  </span>
-</p>
+<div class="field">
+  <p class="control">
+    <input class="input is-small" type="text" placeholder="Small input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input" type="text" placeholder="Normal input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-medium" type="text" placeholder="Medium input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <input class="input is-large" type="text" placeholder="Large input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <span class="select is-small">
+      <select>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <span class="select is-medium">
+      <select>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <span class="select is-large">
+      <select>
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </select>
+    </span>
+  </p>
+</div>
 {% endcapture %}
     <h3 class="title">Sizes</h3>
     <div class="columns">
@@ -197,12 +244,16 @@ doc-subtab: form
     <h3 class="title">States</h3>
     <h4 class="subtitle">Normal</h4>
 {% capture normal_example %}
-<p class="control">
-  <input class="input" type="text" placeholder="Normal input">
-</p>
-<p class="control">
-  <textarea class="textarea" placeholder="Normal textarea"></textarea>
-</p>
+<div class="field">
+  <p class="control">
+    <input class="input" type="text" placeholder="Normal input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <textarea class="textarea" placeholder="Normal textarea"></textarea>
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -217,12 +268,16 @@ doc-subtab: form
 
     <h4 class="subtitle">Hover</h4>
 {% capture hover_example %}
-<p class="control">
-  <input class="input is-hovered" type="text" placeholder="Hovered input">
-</p>
-<p class="control">
-  <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
-</p>
+<div class="field">
+  <p class="control">
+    <input class="input is-hovered" type="text" placeholder="Hovered input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -237,12 +292,16 @@ doc-subtab: form
 
     <h4 class="subtitle">Focus</h4>
 {% capture focus_example %}
-<p class="control">
-  <input class="input is-focused" type="text" placeholder="Focused input">
-</p>
-<p class="control">
-  <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
-</p>
+<div class="field">
+  <p class="control">
+    <input class="input is-focused" type="text" placeholder="Focused input">
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -257,12 +316,16 @@ doc-subtab: form
 
     <h4 class="subtitle">Loading</h4>
 {% capture loading_example %}
-<p class="control is-loading">
-  <input class="input" type="text" placeholder="Loading input">
-</p>
-<p class="control is-loading">
-  <textarea class="textarea" placeholder="Loading textarea"></textarea>
-</p>
+<div class="field">
+  <p class="control is-loading">
+    <input class="input" type="text" placeholder="Loading input">
+  </p>
+</div>
+<div class="field">
+  <p class="control is-loading">
+    <textarea class="textarea" placeholder="Loading textarea"></textarea>
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -277,29 +340,37 @@ doc-subtab: form
 
     <h4 class="subtitle">Disabled</h4>
 {% capture disabled_example %}
-<p class="control">
-  <input class="input" type="text" placeholder="Disabled input" disabled>
-</p>
-<p class="control">
-  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
-</p>
-<p class="control">
-  <label class="checkbox is-disabled">
-    <input type="checkbox" disabled>
-    Remember me
-  </label>
-</p>
-<p class="control">
-  <label class="radio is-disabled">
-    <input type="radio" name="question" disabled>
-    Yes
-  </label>
-  <label class="radio is-disabled">
-    <input type="radio" name="question" disabled>
-    No
-  </label>
-</p>
-<div class="control is-grouped">
+<div class="field">
+  <p class="control">
+    <input class="input" type="text" placeholder="Disabled input" disabled>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <label class="checkbox is-disabled">
+      <input type="checkbox" disabled>
+      Remember me
+    </label>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <label class="radio is-disabled">
+      <input type="radio" name="question" disabled>
+      Yes
+    </label>
+    <label class="radio is-disabled">
+      <input type="radio" name="question" disabled>
+      No
+    </label>
+  </p>
+</div>
+<div class="field is-grouped">
   <p class="control">
     <button class="button is-primary" disabled>Submit</button>
   </p>
@@ -321,23 +392,29 @@ doc-subtab: form
 
     <h4 class="subtitle">With Font Awesome icons</h4>
 {% capture icons_example %}
-<p class="control has-icon">
-  <input class="input" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input" type="password" placeholder="Password">
-  <span class="icon is-small">
-    <i class="fa fa-lock"></i>
-  </span>
-</p>
-<p class="control">
-  <button class="button is-success">
-    Login
-  </button>
-</p>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input" type="password" placeholder="Password">
+    <span class="icon is-small">
+      <i class="fa fa-lock"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <button class="button is-success">
+      Login
+    </button>
+  </p>
+</div>
 {% endcapture %}
     <div class="columns">
       <div class="column is-half">
@@ -351,66 +428,78 @@ doc-subtab: form
     </div>
 
 {% capture icons_sizes_example %}
-<p class="control has-icon">
-  <input class="input is-small" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input" type="email" placeholder="Email">
-  <span class="icon">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <span class="icon">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <span class="icon is-medium">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-large" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-large" type="email" placeholder="Email">
-  <span class="icon">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-large" type="email" placeholder="Email">
-  <span class="icon is-medium">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
-<p class="control has-icon">
-  <input class="input is-large" type="email" placeholder="Email">
-  <span class="icon is-large">
-    <i class="fa fa-envelope"></i>
-  </span>
-</p>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-small" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-medium">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-medium">
+      <i class="fa fa-envelope"></i>
+    </span>
+  </p>
+</div>
 {% endcapture %}
 <div class="columns">
   <div class="column is-half">
@@ -432,30 +521,38 @@ doc-subtab: form
 </div>
 
 {% capture icons_sizes_right_example %}
-<p class="control has-icon has-icon-right">
-  <input class="input is-small" type="email" placeholder="Email">
-  <span class="icon is-small">
-    <i class="fa fa-check"></i>
-  </span>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input" type="email" placeholder="Email">
-  <span class="icon">
-    <i class="fa fa-check"></i>
-  </span>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <span class="icon is-medium">
-    <i class="fa fa-check"></i>
-  </span>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input is-large" type="email" placeholder="Email">
-  <span class="icon is-large">
-    <i class="fa fa-check"></i>
-  </span>
-</p>
+<div class="field">
+  <p class="control has-icon has-icon-right">
+    <input class="input is-small" type="email" placeholder="Email">
+    <span class="icon is-small">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon has-icon-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon has-icon-right">
+    <input class="input is-medium" type="email" placeholder="Email">
+    <span class="icon is-medium">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icon has-icon-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-large">
+      <i class="fa fa-check"></i>
+    </span>
+  </p>
+</div>
 {% endcapture %}
 <div class="columns">
   <div class="column is-half">
@@ -480,12 +577,16 @@ doc-subtab: form
       <p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
 {% capture addons_example %}
-<p class="control has-addons">
-  <input class="input" type="text" placeholder="Find a repository">
-  <a class="button is-info">
-    Search
-  </a>
-</p>
+<div class="field has-addons">
+  <p class="control">
+    <input class="input" type="text" placeholder="Find a repository">
+  </p>
+  <p class="control">
+    <a class="button is-info">
+      Search
+    </a>
+  </p>
+</div
 {% endcapture %}
     <div class="example">
 {{addons_example}}
@@ -498,32 +599,45 @@ doc-subtab: form
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaing space (in this case, the input):</p>
     </div>
 {% capture addons_expanded_example %}
-<p class="control has-addons">
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input is-expanded" type="text" placeholder="Amount of money">
-  <a class="button">
-    Transfer
-  </a>
-</p>
-<p class="control has-addons">
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input is-expanded" type="text" placeholder="Amount of money">
-  <a class="button">
-    Transfer
-  </a>
-</p>
+<div class="field has-addons">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>$</option>
+        <option>£</option>
+        <option>€</option>
+      </select>
+    </span>
+  </p>
+  <p class="control">
+    <input class="input" type="text" placeholder="Amount of money">
+  </p>
+  <p class="control">
+    <a class="button">
+      Transfer
+    </a>
+  </p>
+</div>
+
+<div class="field has-addons">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>$</option>
+        <option>£</option>
+        <option>€</option>
+      </select>
+    </span>
+  </p>
+  <p class="control is-expanded">
+    <input class="input" type="text" placeholder="Amount of money">
+  </p>
+  <p class="control">
+    <a class="button">
+      Transfer
+    </a>
+  </p>
+</div>
 {% endcapture %}
     <div class="example">
 {{addons_expanded_example}}
@@ -535,19 +649,25 @@ doc-subtab: form
       <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
     </div>
 {% capture addons_center_example %}
-<p class="control has-addons has-addons-centered">
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-primary">
-    Transfer
-  </a>
-</p>
+<div class="field has-addons has-addons-centered">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>$</option>
+        <option>£</option>
+        <option>€</option>
+      </select>
+    </span>
+  </p>
+  <p class="control">
+    <input class="input" type="text" placeholder="Amount of money">
+  </p>
+  <p class="control">
+    <a class="button is-primary">
+      Transfer
+    </a>
+  </p>
+</div>
 {% endcapture %}
 <div class="example">
 {{addons_center_example}}
@@ -556,19 +676,25 @@ doc-subtab: form
 {{addons_center_example}}
 {% endhighlight %}
 {% capture addons_right_example %}
-<p class="control has-addons has-addons-right">
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-primary">
-    Transfer
-  </a>
-</p>
+<div class="field has-addons has-addons-right">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>$</option>
+        <option>£</option>
+        <option>€</option>
+      </select>
+    </span>
+  </p>
+  <p class="control">
+    <input class="input" type="text" placeholder="Amount of money">
+  </p>
+  <p class="control">
+    <a class="button is-primary">
+      Transfer
+    </a>
+  </p>
+</div>
 {% endcapture %}
 <div class="example">
 {{addons_right_example}}
@@ -588,7 +714,7 @@ doc-subtab: form
       </p>
     </div>
 {% capture group_example %}
-<div class="control is-grouped">
+<div class="field is-grouped">
   <p class="control is-expanded">
     <input class="input" type="text" placeholder="Find a repository">
   </p>
@@ -622,37 +748,55 @@ doc-subtab: form
       <p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
     </div>
 {% capture horizontal_form_example %}
-<div class="control is-horizontal">
-  <div class="control-label">
+<div class="field is-horizontal">
+  <div class="field-label">
     <label class="label">From</label>
   </div>
-  <div class="control is-grouped">
-    <p class="control is-expanded">
-      <input class="input" type="text" placeholder="Name">
-    </p>
-    <p class="control is-expanded">
-      <input class="input" type="email" placeholder="Email">
-    </p>
+  <div class="field-body">
+    <div class="field is-grouped">
+      <p class="control is-expanded">
+        <input class="input" type="text" placeholder="Name">
+      </p>
+    </div>
+    <div class="field">
+      <p class="control is-expanded has-icon">
+        <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
+        <span class="icon is-small">
+          <i class="fa fa-check"></i>
+        </span>
+      </p>
+      <p class="help is-success">This username is available</p>
+    </div>
   </div>
 </div>
-<div class="control is-horizontal">
-  <div class="control-label">
+
+<div class="field is-horizontal">
+  <div class="field-label">
     <label class="label">Subject</label>
   </div>
-  <div class="control">
-    <div class="select is-fullwidth">
-      <select>
-        <option>General enquiry</option>
-      </select>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <div class="select is-fullwidth">
+          <select>
+            <option>General enquiry</option>
+          </select>
+        </div>
+      </div>
     </div>
   </div>
 </div>
-<div class="control is-horizontal">
-  <div class="control-label">
+
+<div class="field is-horizontal">
+  <div class="field-label">
     <label class="label">Question</label>
   </div>
-  <div class="control">
-    <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
+      </div>
+    </div>
   </div>
 </div>
 {% endcapture %}

sass/elements/form.sass

@@ -152,7 +152,7 @@ $input-radius:              $radius !default
 .help
   display: block
   font-size: $size-small
-  margin-top: 5px
+  margin-top: 0.25rem
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
@@ -160,64 +160,110 @@ $input-radius:              $radius !default
 
 // Containers
 
-.control-label
-  +mobile
-    margin-bottom: 0.5em
-  +tablet
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    margin-right: 1.5em
-    padding-top: 0.5em
-    text-align: right
-
-.control
-  position: relative
-  text-align: left
+.field
   &:not(:last-child)
     margin-bottom: 0.75rem
   // Modifiers
   &.has-addons
     display: flex
     justify-content: flex-start
-    .button,
-    .input,
-    .select
-      border-radius: 0
+    .control
       margin-right: -1px
-      width: auto
       &:hover
         z-index: 2
       &:focus,
       &:active
         z-index: 3
       &:first-child
-        border-radius: $input-radius 0 0 $input-radius
-        select
-          border-radius: $input-radius 0 0 $input-radius
+        .button,
+        .input,
+        .select select
+          border-bottom-left-radius: $input-radius
+          border-top-left-radius: $input-radius
       &:last-child
-        border-radius: 0 $input-radius $input-radius 0
-        select
-          border-radius: 0 $input-radius $input-radius 0
+        .button,
+        .input,
+        .select select
+          border-bottom-right-radius: $input-radius
+          border-top-right-radius: $input-radius
+      .button,
+      .input,
+      .select select
+        border-radius: 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
-    .select select
-      &:hover
-        z-index: 2
-      &:focus,
-      &:active
-        z-index: 3
+      // width: auto
+      // .control:first-child &
+      //   border-radius: $input-radius 0 0 $input-radius
+      //   select
+      //     border-radius: $input-radius 0 0 $input-radius
+      // .control:last-child &
+      //   border-radius: 0 $input-radius $input-radius 0
+      //   select
+      //     border-radius: 0 $input-radius $input-radius 0
+    // .select select
+    //   &:hover
+    //     z-index: 2
+    //   &:focus,
+    //   &:active
+    //     z-index: 3
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
       justify-content: flex-end
     &.has-addons-fullwidth
-      .button,
-      .input,
-      .select
+      .control
         flex-grow: 1
         flex-shrink: 0
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .control
+      flex-basis: 0
+      flex-shrink: 0
+      &:not(:last-child)
+        margin-bottom: 0
+        margin-right: 0.75rem
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+  &.is-horizontal
+    +tablet
+      display: flex
+
+.field-label
+  +mobile
+    margin-bottom: 0.5rem
+  +tablet
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 0
+    margin-right: 1.5rem
+    padding-top: 0.375em
+    text-align: right
+
+.field-body
+  +tablet
+    display: flex
+    flex-basis: 0
+    flex-grow: 5
+    flex-shrink: 1
+    .field
+      flex-grow: 1
+      flex-shrink: 1
+      &:not(:last-child)
+        margin-bottom: 0
+        margin-right: 0.75rem
+
+.control
+  position: relative
+  text-align: left
+  // Modifiers
   &.has-icon
     .icon
       color: $input-icon
@@ -270,33 +316,9 @@ $input-radius:              $radius !default
         // &.is-large
         //   & + .icon
         //     right: ($size-large * 2.5) / 2
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      flex-basis: 0
-      flex-shrink: 0
-      &:not(:last-child)
-        margin-bottom: 0
-        margin-right: 0.75rem
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.is-grouped-centered
-      justify-content: center
-    &.is-grouped-right
-      justify-content: flex-end
-  &.is-horizontal
-    +tablet
-      display: flex
-      & > .control
-        display: flex
-        flex-basis: 0
-        flex-grow: 5
-        flex-shrink: 1
   &.is-loading
     &:after
       +loader
       position: absolute !important
-      right: 0.75em
-      top: 0.75em
+      right: 0.625em
+      top: 0.625em