diff --git a/docs/src/routes/components/field.svelte b/docs/src/routes/components/field.svelte
index 8b1a6e8..2a630c3 100644
--- a/docs/src/routes/components/field.svelte
+++ b/docs/src/routes/components/field.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <script>
-  import { Field, Input } from 'svelma'
+  import { Button, Field, Icon, Input } from 'svelma'
   import DocHeader from '../../components/DocHeader.svelte'
   import Example from '../../components/Example.svelte'
   import JSDoc from '../../components/JSDoc.svelte'
@@ -28,8 +28,12 @@
   <Input value="Rich Harris" />
 </Field>
 
-<Field label="Name" type="is-danger" message="Pick a better name">
-  <Input type="text" value="Moby Dick" />
+<Field label="Email" type="is-danger" message="Email is invalid">
+  <Input value="john@" />
+</Field>
+
+<Field label="Username" type="is-success" message="Username is available">
+  <Input value="joey55" />
 </Field>`}>
   <div slot="preview">
     <Field label="Name">
@@ -46,4 +50,220 @@
   </div>
 </Example>
 
+<hr class="is-medium">
+
+<p class="title is-4">Addons</p>
+
+Multiple controls in a field get attached.  Use <code>expanded</code> property on the control to fill up space on the line.
+
+<Example code={`<script>
+  import { Button, Field, Icon, Input } from 'svelma'
+</script>
+
+<Field>
+  <Input type="search" placeholder="Search" icon="search" />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>
+
+<Field>
+  <Input type="search" placeholder="This is expanded" expanded />
+  <p class="control">
+    <Button type="is-static">@gmail.com</Button>
+  </p>
+</Field>
+
+<hr>
+
+<Field>
+  <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
+  <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
+  <Input expanded icon="comment" placeholder="Text here" />
+</Field>
+
+<Field>
+  <div class="control"><Button type="is-primary">Button</Button></div>
+  <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
+</Field>`}>
+  <div slot="preview">
+    <Field>
+      <Input type="search" placeholder="Search" icon="search" />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+
+    <Field>
+      <Input type="search" placeholder="This is expanded" expanded />
+      <p class="control">
+        <Button type="is-static">@gmail.com</Button>
+      </p>
+    </Field>
+
+    <hr>
+
+    <Field>
+      <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
+      <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
+      <Input expanded icon="comment" placeholder="Text here" />
+    </Field>
+
+    <Field>
+      <div class="control"><Button type="is-primary">Button</Button></div>
+      <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Groups</p>
+
+Use the <code>grouped</code> property to group controls together. Use the <code>expanded</code> property to make a control take up remaining space.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma'
+</script>
+
+<Field grouped>
+  <Input type="search" placeholder="Search" icon="search" />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>
+
+<Field grouped>
+  <Input type="search" placeholder="Search" icon="search" expanded />
+  <p class="control">
+    <Button type="is-primary">Search</Button>
+  </p>
+</Field>`}>
+  <div slot="preview">
+    <Field grouped>
+      <Input type="search" placeholder="Search" icon="search" />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+
+    <Field grouped>
+      <Input type="search" placeholder="Search" icon="search" expanded />
+      <p class="control">
+        <Button type="is-primary">Search</Button>
+      </p>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Nested Groups</p>
+
+You can nest fields inside fields. You have to use the <code>expanded</code> property on the <strong>Field</strong> to fill up the remaining space. 
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma'
+</script>
+
+<Field grouped>
+  <Field label="Button">
+    <Button type="is-primary">Button</Button>
+  </Field>
+
+  <Field label="Name" expanded>
+    <Input />
+  </Field>
+
+  <Field label="Email" expanded>
+    <Input />
+  </Field>
+</Field>`}>
+  <div slot="preview">
+    <Field grouped>
+      <Field label="Button">
+        <Button type="is-primary">Button</Button>
+      </Field>
+
+      <Field label="Name" expanded>
+        <Input />
+      </Field>
+
+      <Field label="Email" expanded>
+        <Input />
+      </Field>
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Responsive Groups</p>
+
+Add <code>groupMultiline</code> property to allow controls to fill up multiple lines.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma'
+</script>
+
+<Field grouped groupMultiline>
+  <Input />
+  {#each Array(30).fill().map((x, i) => i+1) as num}
+    <div class="control">
+      <Button>{num}</Button>
+    </div>
+  {/each}
+</Field>`}>
+  <div slot="preview">
+    <Field grouped groupMultiline>
+      <Input />
+      {#each Array(30).fill().map((x, i) => i+1) as num}
+        <div class="control">
+          <Button>{num}</Button>
+        </div>
+      {/each}
+    </Field>
+  </div>
+</Example>
+
+<hr class="is-medium">
+
+<p class="title is-4">Positions</p>
+
+Use <code>position</code> property to align Field horizontally.
+
+<Example code={`<script>
+  import { Button, Field, Input } from 'svelma'
+</script>
+
+<Field position="is-centered">
+  <Input />
+  <div class="control"><Button type="is-primary">Button</Button></div>
+</Field>
+
+<Field grouped position="is-right">
+  <Input />
+  <div class="control"><Button type="is-primary">Button</Button></div>
+</Field>`}>
+  <div slot="preview">
+    <Field position="is-centered">
+      <Input />
+      <div class="control"><Button type="is-primary">Button</Button></div>
+    </Field>
+
+    <Field grouped position="is-right">
+      <Input />
+      <div class="control"><Button type="is-primary">Button</Button></div>
+    </Field>
+  </div>
+</Example>
+
 <JSDoc {jsdoc}></JSDoc>
\ No newline at end of file
diff --git a/docs/src/routes/components/jsdocs.json b/docs/src/routes/components/jsdocs.json
index 0609f5c..f5ab19a 100644
--- a/docs/src/routes/components/jsdocs.json
+++ b/docs/src/routes/components/jsdocs.json
@@ -661,6 +661,36 @@
         "columnno": 2,
         "path": "src/components"
       },
+      "description": "Type (color) of the field and help message. Also adds a matching icon.",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "name": "type",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "name": "type"
+      },
+      "kind": "prop",
+      "values": "<code>is-white</code>, <code>is-black</code>, <code>is-light</code>, <code>is-dark</code>, <code>is-primary</code>, <code>is-info</code>, <code>is-success</code>, <code>is-warning</code>, <code>is-danger</code>",
+      "longname": "module:Field~type",
+      "scope": "inner",
+      "memberof": "module:Field",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Field.svelte",
+        "lineno": 12,
+        "columnno": 2,
+        "path": "src/components"
+      },
       "description": "Label for input",
       "type": [
         "String"
@@ -687,16 +717,16 @@
     {
       "meta": {
         "filename": "Field.svelte",
-        "lineno": 11,
+        "lineno": 17,
         "columnno": 2,
         "path": "src/components"
       },
-      "description": "Type (color of control)",
+      "description": "Same as native <code>for</code> on label",
       "type": [
         "String"
       ],
       "optional": true,
-      "name": "type",
+      "name": "labelFor",
       "_isSvelteDoc": true,
       "_svelteProps": {
         "type": {
@@ -705,19 +735,19 @@
           ]
         },
         "optional": true,
-        "name": "type"
+        "name": "labelFor"
       },
       "kind": "prop",
-      "values": "<code>is-white</code>, <code>is-black</code>, <code>is-light</code>, <code>is-dark</code>, <code>is-primary</code>, <code>is-info</code>, <code>is-success</code>, <code>is-warning</code>, <code>is-danger</code>",
-      "longname": "module:Field~type",
+      "longname": "module:Field~labelFor",
       "scope": "inner",
       "memberof": "module:Field",
-      "___s": true
+      "___s": true,
+      "values": ""
     },
     {
       "meta": {
         "filename": "Field.svelte",
-        "lineno": 17,
+        "lineno": 22,
         "columnno": 2,
         "path": "src/components"
       },
@@ -743,6 +773,126 @@
       "memberof": "module:Field",
       "___s": true,
       "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Field.svelte",
+        "lineno": 27,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Direct child components/elements of Field will be grouped horizontally",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": false,
+      "name": "grouped",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "Boolean"
+          ]
+        },
+        "defaultvalue": false,
+        "name": "grouped"
+      },
+      "kind": "prop",
+      "longname": "module:Field~grouped",
+      "scope": "inner",
+      "memberof": "module:Field",
+      "___s": true,
+      "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Field.svelte",
+        "lineno": 32,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Allow grouped controls to cover multiple lines",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": false,
+      "name": "groupMultiline",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "Boolean"
+          ]
+        },
+        "defaultvalue": false,
+        "name": "groupMultiline"
+      },
+      "kind": "prop",
+      "longname": "module:Field~groupMultiline",
+      "scope": "inner",
+      "memberof": "module:Field",
+      "___s": true,
+      "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Field.svelte",
+        "lineno": 37,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Alter the alignment of the field",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "name": "position",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "name": "position"
+      },
+      "kind": "prop",
+      "values": "<code>is-centered</code>, <code>is-right</code>",
+      "longname": "module:Field~position",
+      "scope": "inner",
+      "memberof": "module:Field",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Field.svelte",
+        "lineno": 43,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Automatically attach child controls together",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": true,
+      "name": "addons",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "Boolean"
+          ]
+        },
+        "defaultvalue": true,
+        "name": "addons"
+      },
+      "kind": "prop",
+      "longname": "module:Field~addons",
+      "scope": "inner",
+      "memberof": "module:Field",
+      "___s": true,
+      "values": ""
     }
   ],
   "Icon": [],
@@ -848,11 +998,41 @@
         "columnno": 2,
         "path": "src/components"
       },
+      "description": "Makes input full-width when inside a grouped or addon field",
+      "type": [
+        "boolean"
+      ],
+      "defaultvalue": false,
+      "name": "expanded",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "boolean"
+          ]
+        },
+        "defaultvalue": false,
+        "name": "expanded"
+      },
+      "kind": "prop",
+      "longname": "module:Input~expanded",
+      "scope": "inner",
+      "memberof": "module:Input",
+      "___s": true,
+      "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Input.svelte",
+        "lineno": 29,
+        "columnno": 2,
+        "path": "src/components"
+      },
       "description": "Show the password reveal toggle button",
       "type": [
         "boolean"
       ],
-      "optional": true,
+      "defaultvalue": false,
       "name": "passwordReveal",
       "_isSvelteDoc": true,
       "_svelteProps": {
@@ -861,7 +1041,7 @@
             "boolean"
           ]
         },
-        "optional": true,
+        "defaultvalue": false,
         "name": "passwordReveal"
       },
       "kind": "prop",
@@ -874,7 +1054,7 @@
     {
       "meta": {
         "filename": "Input.svelte",
-        "lineno": 29,
+        "lineno": 34,
         "columnno": 2,
         "path": "src/components"
       },
@@ -904,7 +1084,7 @@
     {
       "meta": {
         "filename": "Input.svelte",
-        "lineno": 34,
+        "lineno": 39,
         "columnno": 2,
         "path": "src/components"
       },
@@ -936,7 +1116,7 @@
     {
       "meta": {
         "filename": "Input.svelte",
-        "lineno": 39,
+        "lineno": 44,
         "columnno": 2,
         "path": "src/components"
       },
@@ -968,7 +1148,67 @@
     {
       "meta": {
         "filename": "Input.svelte",
-        "lineno": 44,
+        "lineno": 49,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Show this icon on left side of input",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "name": "icon",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "name": "icon"
+      },
+      "kind": "prop",
+      "longname": "module:Input~icon",
+      "scope": "inner",
+      "memberof": "module:Input",
+      "___s": true,
+      "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Input.svelte",
+        "lineno": 54,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Fontawesome icon pack to use. By default the <code>Icon</code> component uses <code>fas</code>",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "name": "iconPack",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "name": "iconPack"
+      },
+      "kind": "prop",
+      "values": "<code><code>fas</code></code>, <code><code>fab</code></code>, <code>etc...</code>",
+      "longname": "module:Input~iconPack",
+      "scope": "inner",
+      "memberof": "module:Input",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Input.svelte",
+        "lineno": 60,
         "columnno": 2,
         "path": "src/components"
       },
diff --git a/src/components/Field.svelte b/src/components/Field.svelte
index ee84074..84bb0fb 100644
--- a/src/components/Field.svelte
+++ b/src/components/Field.svelte
@@ -2,45 +2,121 @@
   import { onMount, setContext } from 'svelte'
   import { omit } from '../utils'
 
+  /** Type (color) of the field and help message. Also adds a matching icon.
+   * @svelte-prop {String} [type]
+   * @values $$colors$$
+   * */
+  export let type = ''
+
   /** Label for input
    * @svelte-prop {String} [label]
    * */
   export let label = null
 
-  /** Type (color of control)
-   * @svelte-prop {String} [type]
-   * @values $$colors$$
+  /** Same as native <code>for</code> on label
+   * @svelte-prop {String} [labelFor]
    * */
-  export let type = ''
+  export let labelFor = ''
 
   /** Message to show beneath input
    * @svelte-prop {String} [message]
    * */
   export let message = ''
 
-  export let labelFor = ''
+  /** Direct child components/elements of Field will be grouped horizontally
+   * @svelte-prop {Boolean} grouped=false
+   * */
+  export let grouped = false
+
+  /** Allow grouped controls to cover multiple lines
+   * @svelte-prop {Boolean} groupMultiline=false
+   * */
+  export let groupMultiline = false
+
+  /** Alter the alignment of the field
+   * @svelte-prop {String} [position]
+   * @values is-centered, is-right
+   * */
+  export let position = ''
+
+  /** Automatically attach child controls together
+   * @svelte-prop {Boolean} addons=true
+   * */
+  export let addons = true
+
+  export let expanded = false
 
   setContext('type', () => type)
 
+  let el
+  let labelEl
+  let messageEl
+  let fieldType = ''
   let hasIcons = false
   let iconType = ''
+  let mounted = false
+  let newPosition = ''
 
+  // Determine the icon type
   $: {
     if (['is-danger', 'is-success'].includes(type)) {
-      hasIcons = true
       iconType = type
     }
   }
 
-  $: props = { ...omit($$props, 'class') }
+  $: {
+    if (grouped) fieldType = 'is-grouped'
+    else if (mounted) {
+      const childNodes = Array.prototype.filter.call(el.children, c => !([labelEl, messageEl].includes(c)))
+      if (childNodes.length > 1 && addons) {
+        fieldType = 'has-addons'
+      }
+    }
+  }
+
+  // Update has-addons-* or is-grouped-* classes based on position prop
+  $: {
+    if (position) {
+      const pos = position.split('-')
+      if (pos.length >= 1) {
+        const prefix = grouped ? 'is-grouped-' : 'has-addons-'
+        newPosition = prefix + pos[1]
+      }
+    }
+  }
+
+  $: props = { ...omit($$props, 'addons', 'class', 'expanded', 'grouped', 'label', 'labelFor', 'position', 'type') }
+
+  onMount(() => {
+    mounted = true
+  })
 </script>
 
-<div {...props} class="field {type} {$$props.class || ''}" has-icons-right={hasIcons}>
+<style lang="scss">
+  .field {
+    &.is-grouped {
+      .field {
+        flex-shrink: 0;
+
+        &:not(:last-child) {
+          margin-right: 0.75rem;
+        }
+
+        &.is-expanded {
+          flex-grow: 1;
+          flex-shrink: 1;
+        }
+      }
+    }
+  }
+</style>
+
+<div {...props} class="field {type} {fieldType} {newPosition} {$$props.class || ''}" class:is-expanded={expanded} class:is-grouped-multiline={groupMultiline} bind:this={el}>
   {#if label}
-    <label for={labelFor} class="label">{label}</label>
+    <label for={labelFor} class="label" bind:this={labelEl}>{label}</label>
   {/if}
   <slot statusType={type} />
   {#if message}
-    <p class="help {type}">{message}</p>
+    <p class="help {type}" bind:this={messageEl}>{message}</p>
   {/if}
 </div>
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 8c6b6f4..9ec925f 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -6,6 +6,7 @@
   export let customClass = ''
   export let customSize = ''
   export let isClickable = false
+  export let isLeft = false
   export let isRight = false
 
   let newCustomSize = ''
@@ -49,6 +50,6 @@
   }
 </script>
 
-<span class="icon {size} {newType} {(isRight && 'is-right') || ''}" class:is-clickable={isClickable} on:click>
+<span class="icon {size} {newType} {(isLeft && 'is-left') || ''} {(isRight && 'is-right') || ''}" class:is-clickable={isClickable} on:click>
   <i class="{newPack} fa-{icon} {customClass} {newCustomSize}" />
 </span>
diff --git a/src/components/Input.svelte b/src/components/Input.svelte
index f1c889b..8a24f65 100644
--- a/src/components/Input.svelte
+++ b/src/components/Input.svelte
@@ -20,8 +20,13 @@
    * */
   export let size = ''
 
+  /** Makes input full-width when inside a grouped or addon field
+   * @svelte-prop {boolean} expanded=false
+   * */
+  export let expanded = false
+
   /** Show the password reveal toggle button
-   * @svelte-prop {boolean} [passwordReveal]
+   * @svelte-prop {boolean} passwordReveal=false
    * */
   export let passwordReveal = false
 
@@ -40,6 +45,17 @@
    * */
   export let loading = false
 
+  /** Show this icon on left side of input
+   * @svelte-prop {String} [icon]
+   * */
+  export let icon = ''
+
+  /** Fontawesome icon pack to use. By default the <code>Icon</code> component uses <code>fas</code>
+   * @svelte-prop {String} [iconPack]
+   * @values <code>fas</code>, <code>fab</code>, etc...
+   * */
+  export let iconPack = ''
+
   /** Input is disabled
    * @svelte-prop {boolean} [disabled=false]
    * */
@@ -59,6 +75,7 @@
   $: props = {
     ...omit($$props, 'class', 'value', 'type', 'size', 'passwordReveal', 'hasCounter', 'loading', 'disabled'),
   }
+  $: hasIconLeft = !!icon
   $: hasIconRight = passwordReveal || loading || statusType
   $: passwordVisibleIcon = isPasswordVisible ? 'eye-slash' : 'eye'
   $: {
@@ -113,16 +130,14 @@
   }
 </style>
 
-<div class="control" class:has-icons-right={hasIconRight} class:is-loading={loading}>
+<div class="control" class:has-icons-left={hasIconLeft} class:has-icons-right={hasIconRight} class:is-loading={loading} class:is-expanded={expanded}>
 
   {#if type !== 'textarea'}
     <input
       {...props}
       type={newType}
       {value}
-      class="input {statusType}
-      {size}
-      {$$props.class || ''}"
+      class="input {statusType} {size} {$$props.class || ''}"
       bind:this={input}
       on:input={onInput}
       on:focus={onFocus}
@@ -141,6 +156,13 @@
       {disabled} />
   {/if}
 
+  {#if icon}
+    <Icon
+      pack={iconPack}
+      isLeft={true}
+      {icon} />
+  {/if}
+
   {#if !loading && (passwordReveal || statusType)}
     <!-- pack={iconPack}
     size={iconSize} -->