Make file buttons a component; fix #40

2026-01-12 12:09:26 +00:00 · 2017-08-30 11:58:46 -04:00
parent 3cbbdc058b
commit 0f8e1ecafc
28 changed files with 365 additions and 42 deletions
--- a/dist/shoelace.css
+++ b/dist/shoelace.css
--- a/docs/alerts.html
+++ b/docs/alerts.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/attribution.html
+++ b/docs/attribution.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/badges.html
+++ b/docs/badges.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/browser-support.html
+++ b/docs/browser-support.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/buttons.html
+++ b/docs/buttons.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
@@ -164,18 +165,6 @@
  <button type="button" class="button-loader button-dark">Button</button>
 </div>

-<h3 id="file-buttons">File Buttons</h3>
-<p>File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
-<p>File buttons are simply <code>&lt;label&gt;</code> elements with the <code>button</code> class and a nested file input.</p>
-<pre><code class="lang-html">&lt;label class=&quot;button&quot;&gt;
-  Select File
-  &lt;input type=&quot;file&quot;&gt;
-&lt;/label&gt;
-</code></pre>
-<div class="input-field">
-  <label class="button">Select File <input type="file"></label>
-</div>
-
        </div>
      </div>
  </main>
--- a/docs/content.html
+++ b/docs/content.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/customizing.html
+++ b/docs/customizing.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/file-buttons.html
+++ b/docs/file-buttons.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add buttons to let users select files in your app.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>File Buttons</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+
+    <p class="text-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="file-buttons">File Buttons</h2>
+<p>File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.</p>
+<p>File buttons are much easier to style, but come with the caveat that the name and number of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
+<p>To create a file button, use the following markup. Note that the input needs to have an <code>id</code> and the label needs to have a matching <code>for</code> attribute. The label also needs to have the <code>button</code> class.</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-file&quot;&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-file&quot;&gt;Select File&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="file-input">
+  <label class="button" for="file-input">Select File</label>
+</span></p>
+<p>This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.</p>
+<p>You can allow multiple files to be selected by adding the <code>multiple</code> attribute:</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-files&quot; multiple&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-files&quot;&gt;Select Files&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span></p>
+<h3 id="variations">Variations</h3>
+<p>File buttons can use <a href="buttons.html">button modifiers</a>. Just apply the appropriate classes to the label.</p>
+<p><span class="file-button">
+  <input type="file" id="file-input-xs">
+  <label class="button button-xs" for="file-input-xs">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-sm">
+  <label class="button button-sm" for="file-input-sm">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-lg">
+  <label class="button button-lg" for="file-input-lg">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-xl">
+  <label class="button button-xl" for="file-input-xl">Browse</label>
+</span></p>
+<p><span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-secondary">
+  <label class="button button-secondary" for="file-input-secondary">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-success">
+  <label class="button button-success" for="file-input-success">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-info">
+  <label class="button button-info" for="file-input-info">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-warning">
+  <label class="button button-warning" for="file-input-warning">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-danger">
+  <label class="button button-danger" for="file-input-danger">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-light">
+  <label class="button button-light" for="file-input-light">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-dark">
+  <label class="button button-dark" for="file-input-dark">Browse</label>
+</span></p>
+<p>You can also use file buttons in <a href="forms.html#input-groups">input groups</a>.</p>
+<div class="input-group">
+  <span class="file-button">
+    <input type="file" id="file-input-group">
+    <label class="button" for="file-input-group">Select File</label>
+  </span>
+  <input type="text">
+  <button type="button">Submit</button>
+</div>
+
+        </div>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta20
+    </p>
+
+    <p class="mar-y-sm text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -37,6 +37,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
@@ -89,11 +90,14 @@
        <code>&lt;input type=&quot;file&quot;&gt;</code>
        <br>
        <span class="text-small text-secondary">
-          File inputs aren’t supported. Use a <a href="buttons.html#file-buttons">file button</a> instead.
+          File inputs aren’t supported. Use a <a href="file-buttons.html">file button</a> instead.
        </span>
      </td>
      <td>
-        <label class="button button-block">Select File <input type="file"></label>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
      </td>
    </tr>
    <tr>
--- a/docs/grid-system.html
+++ b/docs/grid-system.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/icons.html
+++ b/docs/icons.html
@@ -37,6 +37,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/installing.html
+++ b/docs/installing.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/loaders.html
+++ b/docs/loaders.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/progress-bars.html
+++ b/docs/progress-bars.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/switches.html
+++ b/docs/switches.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/tables.html
+++ b/docs/tables.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/tabs.html
+++ b/docs/tabs.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -36,6 +36,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>
--- a/source/css/buttons.css
+++ b/source/css/buttons.css
@@ -311,11 +311,6 @@ button,
  }
 }

-/* File buttons */
-label.button input[type="file"] {
-  display: none;
-}
-
 /* Loader buttons */
 .button-loader,
 .button-loader:hover {
--- a/source/css/file-buttons.css
+++ b/source/css/file-buttons.css
@@ -0,0 +1,25 @@
+/*! File buttons */
+
+.file-button {
+  & input[type="file"] {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0;
+
+    /* When the input receives focus, simulate button focus states on the label */
+    &:focus + label { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%)); }
+    &:focus + label.button-secondary { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%)); }
+    &:focus + label.button-success { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%)); }
+    &:focus + label.button-info { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%)); }
+    &:focus + label.button-warning { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%)); }
+    &:focus + label.button-danger { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%)); }
+    &:focus + label.button-light { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%)); }
+    &:focus + label.button-dark { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%)); }
+  }
+}
--- a/source/css/forms.css
+++ b/source/css/forms.css
@@ -273,6 +273,7 @@ input[type="range"] {
  & > .button,
  & > .dropdown button,
  & > .dropdown .button,
+  & > .file-button label,
  & > .input-icon input,
  & > .input-icon select {
    border-radius: 0;
@@ -283,6 +284,7 @@ input[type="range"] {
  & > .button:first-child,
  & > .dropdown:first-child button,
  & > .dropdown:first-child .button,
+  & > .file-button:first-child label,
  & > .input-icon:first-child input,
  & > .input-icon:first-child select {
    border-top-left-radius: var(--input-border-radius);
@@ -294,6 +296,7 @@ input[type="range"] {
  & > .button:last-child,
  & > .dropdown:last-child button,
  & > .dropdown:last-child .button,
+  & > .file-button:last-child label,
  & > .input-icon:last-child input,
  & > .input-icon:last-child select {
    border-top-right-radius: var(--input-border-radius);
@@ -309,9 +312,10 @@ input[type="range"] {
    margin-left: calc(var(--input-border-width) * -1);
  }

+  /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
  & button:focus,
-  & .button:focus {
-    /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+  & .button:focus,
+  & .file-button input[type="file"]:focus + label {
    transform: translateZ(0);
  }
 }
--- a/source/css/shoelace.css
+++ b/source/css/shoelace.css
@@ -12,6 +12,7 @@
@import url('badges.css');
@import url('buttons.css');
@import url('dropdowns.css');
+@import url('file-buttons.css');
@import url('forms.css');
@import url('grid.css');
@import url('loaders.css');
--- a/source/docs/buttons.md
+++ b/source/docs/buttons.md
@@ -147,20 +147,3 @@ Loader buttons also work with button variations.
  <button type="button" class="button-loader button-light">Button</button>
  <button type="button" class="button-loader button-dark">Button</button>
 </div>
-
-### File Buttons
-
-File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an [exercise for the user](https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file).
-
-File buttons are simply `<label>` elements with the `button` class and a nested file input.
-
-```html
-<label class="button">
-  Select File
-  <input type="file">
-</label>
-```
-
-<div class="input-field">
-  <label class="button">Select File <input type="file"></label>
-</div>
--- a/source/docs/file-buttons.md
+++ b/source/docs/file-buttons.md
@@ -0,0 +1,110 @@
+---
+layout: default.html
+title: File Buttons
+description: Add buttons to let users select files in your app.
+---
+
+## File Buttons
+
+File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.
+
+File buttons are much easier to style, but come with the caveat that the name and number of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an [exercise for the user](https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file).
+
+To create a file button, use the following markup. Note that the input needs to have an `id` and the label needs to have a matching `for` attribute. The label also needs to have the `button` class.
+
+```html
+<span class="file-button">
+  <input type="file" id="my-file">
+  <label class="button" for="my-file">Select File</label>
+</span>
+```
+
+<span class="file-button">
+  <input type="file" id="file-input">
+  <label class="button" for="file-input">Select File</label>
+</span>
+
+This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.
+
+You can allow multiple files to be selected by adding the `multiple` attribute:
+
+```html
+<span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span>
+```
+
+<span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span>
+
+### Variations
+
+File buttons can use [button modifiers](buttons.html). Just apply the appropriate classes to the label.
+
+<span class="file-button">
+  <input type="file" id="file-input-xs">
+  <label class="button button-xs" for="file-input-xs">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-sm">
+  <label class="button button-sm" for="file-input-sm">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-lg">
+  <label class="button button-lg" for="file-input-lg">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-xl">
+  <label class="button button-xl" for="file-input-xl">Browse</label>
+</span>
+
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-secondary">
+  <label class="button button-secondary" for="file-input-secondary">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-success">
+  <label class="button button-success" for="file-input-success">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-info">
+  <label class="button button-info" for="file-input-info">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-warning">
+  <label class="button button-warning" for="file-input-warning">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-danger">
+  <label class="button button-danger" for="file-input-danger">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-light">
+  <label class="button button-light" for="file-input-light">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-dark">
+  <label class="button button-dark" for="file-input-dark">Browse</label>
+</span>
+
+You can also use file buttons in [input groups](forms.html#input-groups).
+
+<div class="input-group">
+  <span class="file-button">
+    <input type="file" id="file-input-group">
+    <label class="button" for="file-input-group">Select File</label>
+  </span>
+  <input type="text">
+  <button type="button">Submit</button>
+</div>
--- a/source/docs/forms.md
+++ b/source/docs/forms.md
@@ -46,11 +46,14 @@ Form controls are styled at 100% of the width of their parent element.
        <code>&lt;input type=&quot;file&quot;&gt;</code>
        <br>
        <span class="text-small text-secondary">
-          File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead.
+          File inputs aren’t supported. Use a [file button](file-buttons.html) instead.
        </span>
      </td>
      <td>
-        <label class="button button-block">Select File <input type="file"></label>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
      </td>
    </tr>
    <tr>
--- a/source/layouts/default.html
+++ b/source/layouts/default.html
@@ -39,6 +39,7 @@
          <li><a href="badges.html">Badges</a></li>
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
          <li><a href="forms.html">Forms</a></li>
          <li><a href="grid-system.html">Grid System</a></li>
          <li><a href="loaders.html">Loaders</a></li>