diff --git a/docs/buttons.html b/docs/buttons.html
index 45e5bd02..dbbe35d3 100644
--- a/docs/buttons.html
+++ b/docs/buttons.html
@@ -3,4 +3,8 @@
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p><article aria-label="Buttons styles examples"><a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>And a classic <code>.outline</code> variant.</p><article aria-label="Outline style examples"><a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a> <a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a> <a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
-&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
\ No newline at end of file
+&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre></footer></article><p>Tie buttons together as <code>.button-group</code>.</p><article aria-label="Button group examples"><div class="button-group"><button>&NestedLessLess;</button> <button>Playing &#9835;</button> <button>&NestedGreaterGreater;</button></div><footer class="code"><pre><code>&lt;<b>div</b>  <i>class</i>=<u>"button-group"</u>&gt;
+&lt;<b>button</b>&gt;&NestedLessLess;&lt;<b>/button</b>&gt;
+&lt;<b>button</b>&gt;Playing &#9835; &lt;<b>/button</b>&gt;
+&lt;<b>button</b>&gt;&NestedGreaterGreater;&lt;<b>/button</b>&gt;
+&lt;<b>/div</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
\ No newline at end of file
diff --git a/docs/forms.html b/docs/forms.html
index e866a3cc..771c23af 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -102,4 +102,12 @@
 <em>&lt;!-- Color --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"color"</u>&gt;Color
   &lt;<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
-&lt;/<b>label</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
\ No newline at end of file
+&lt;/<b>label</b>&gt;</code></pre></footer></article><p>You can combine inputs and buttons to an <code>input-group</code>.</p><article aria-label="input group example"><div class="input-group"><a role="button" class="contrast">https://picocss.com/ </a><input type="text" value="docs/forms.html"/> <a role="button" class="contrast">&#x1F512;</a></div><footer class="code"><pre><code>&lt;<b>div</b>&gt; <i>class</i>=<u>"="input-group"</u>&gt;
+&lt;<b>a</b> <i>role</i>=<u>"="button"</u> <i>class</i>=<u>"="contrast"</u>&gt;
+https://picocss.com/
+&lt;<b>/a</b>&gt;
+&lt;<b>input <i>type</i>=<u>"="text"</u> <i>value</i>=<u>"="docs/forms.html"</u> /&gt;
+&lt;<b>a <i>role</i>=<u>"="button"</u> <i>class</i>=<u>"="contrast"</u>&gt;
+&#x1F512;
+&lt;<b>/a</b>&gt;
+&lt;<b>/div</b>&gt;</b></b></code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
\ No newline at end of file