causeway-standard-theme/causeway/docs/components/form-fields/file-input.html

<div>
  <a id="forms-file"></a>
  <header class="content-header">
    <h1 class="title">
      File
    </h1>
  </header>

  <p>
    File controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the text <code>&lt;input&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
          Standard Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group file-input">
                <label for="file-field1a" class="control-label">File:</label>
                <div class="control-input">
                  <input type="file" class="form-control file-input-file sr-only" id="file-field1a" name="file_field1a">
                  <input type="hidden" class="file-input-remove" id="file-field1e-remove" name="file_field1a_remove" value="0">
                  <input type="text" class="form-control file-input-text" id="file-field1a-text" placeholder="Path / Filename" value="">
                  <label for="file-field1a" class="btn btn-text btn-file btn-file-choose">Choose File</label>
                  <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group file-input disabled">
                <label for="file-field1b" class="control-label">File:</label>
                <div class="control-input">
                  <input type="file" disabled="disabled" class="form-control file-input-file sr-only" id="file-field1b" name="file_field1b">
                  <input type="hidden" disabled="disabled" class="file-input-remove" id="file-field1b-remove" name="file_field1b_remove" value="0">


                  <input type="text" disabled="disabled" class="form-control" id="file-field1b-text" placeholder="Path / Filename" value="">
                  <label for="file-field1b" class="btn btn-text btn-file btn-file-choose">Choose File</label>
                  <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group file-input invalid">
                <label for="file-field1c" class="control-label">File:</label>
                <div class="control-input">
                  <input type="file" class="form-control file-input-file sr-only" id="file-field1c" name="file_field1c">
                  <input type="hidden" class="file-input-remove" id="file-field1c-remove" name="file_field1c_remove" value="0">


                  <input type="text" class="form-control file-input-text" id="file-field1c-text" placeholder="Path / Filename" value="">
                  <label for="file-field1c" class="btn btn-text btn-file btn-file-choose">Choose File</label>
                  <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Read Only
        </td>
        <td>
          class
          <br/><br/>
          readonly
        </td>
        <td>
          readonly
          <br/><br/>
          readonly
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group file-input readonly">
                <label for="file-field1d" class="control-label">File:</label>
                <div class="control-input">
                  <input type="file" class="form-control file-input-file sr-only" id="file-field1d" name="file_field1d" readonly="readonly">
                  <input type="hidden" class="file-input-remove" id="file-field1d-remove" name="file_field1d_remove" value="0">

                  <input type="text" class="form-control file-input-text" readonly="readonly" id="file-field1d-text" placeholder="Path / Filename" value="">
                  <label for="file-field1d" class="btn btn-text btn-file btn-file-choose">Choose File</label>
                  <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
  &lt;div class=&quot;form-row&quot;&gt;
    &lt;div class=&quot;form-group file-input&quot;&gt;
      &lt;label for=&quot;file-field1a&quot; class=&quot;control-label&quot;&gt;File:&lt;/label&gt;
      &lt;div class=&quot;control-input&quot;&gt;
        &lt;input type=&quot;file&quot; class=&quot;form-control file-input-file sr-only&quot; id=&quot;file-field1a&quot; name=&quot;file_field1a&quot;&gt;
        &lt;input type=&quot;hidden&quot; class=&quot;file-input-remove&quot; id=&quot;file-field1a-remove&quot; name=&quot;file_field1a_remove&quot; value=&quot;0&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control file-input-text&quot; id=&quot;file-field1a-text&quot; placeholder=&quot;Path / Filename&quot; value=&quot;&quot;&gt;
        &lt;label for=&quot;file-field1a&quot; class=&quot;btn btn-text btn-file btn-file-choose&quot;&gt;Choose File&lt;/label&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-text btn-file btn-file-remove&quot;&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    </code>
  </pre>
</div>