NJ Web Design System (v1.0.0)

File input 

<!-- Default -->
<div class="usa-form-group">
    <label class="usa-label" for="file-input-single">Input accepts a single file</label>
    <input id="file-input-single" class="usa-file-input" type="file" name="file-input-single" />
</div>


<!-- Specific -->
<div class="usa-form-group">
    <label class="usa-label" for="file-input-specific">Input accepts only specific file types</label>
    <span class="usa-hint" id="file-input-specific-hint">Select PDF or TXT files</span>
    <input id="file-input-specific" class="usa-file-input" type="file" name="file-input-specific" aria-describedby="file-input-specific-hint" accept=".pdf,.txt" />
</div>


<!-- Multiple -->
<div class="usa-form-group">
    <label class="usa-label" for="file-input-multiple">Input accepts multiple files</label>
    <span class="usa-hint" id="file-input-multiple-hint">Select one or more files</span>
    <input id="file-input-multiple" class="usa-file-input" type="file" name="file-input-multiple" aria-describedby="file-input-multiple-hint" multiple />
</div>


<!-- Error -->
<div class="usa-form-group usa-form-group--error">
    <label class="usa-label usa-label--error" for="file-input-error">Input has an error</label>
    <span class="usa-hint" id="file-input-error-hint">Select any valid file</span>
    <span class="usa-error-message" id="file-input-error-alert" role="alert">Display a helpful error message</span>
    <input id="file-input-error" class="usa-file-input" type="file" name="file-input-error" aria-describedby="file-input-error-hint" />
</div>


<!-- Disabled -->
<div class="usa-form-group">
    <label class="usa-label" for="file-input-disabled">Input in a disabled state</label>
    <input id="file-input-disabled" class="usa-file-input" type="file" name="file-input-disabled" disabled />
</div>

No notes defined.

{% set name = "file-input" %}

<div class="usa-form-group{% if error %} usa-form-group--error{% endif %}">
  <label class="usa-label{% if error %} usa-label--error{% endif %}" for="{{ name }}-{{ id }}">{{ label }}</label>
  {%- if hint %}
  <span class="usa-hint" id="{{ name }}-{{ id }}-hint">{{ hint }}</span>
  {%- endif -%}
  {%- if error %}
  <span class="usa-error-message" id="{{ name }}-{{ id }}-alert" role="alert">{{ errorMessage }}</span>
  {%- endif %}
  <input id="{{ name }}-{{ id }}"
    class="usa-file-input"
    type="file"
    name="{{ name }}-{{ id }}"
    {% if hint -%}aria-describedby="{{ name }}-{{ id }}-hint"{%- endif -%}
    {% if accept -%}accept="{{ accept }}"{%- endif -%}
    {% if multiple -%} multiple{%- endif -%}
    {% if disabled -%} disabled{%- endif -%} />
</div>
 
/* Default */
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
id: single
label: Input accepts a single file



/* Specific */
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
id: specific
label: Input accepts only specific file types
hint: Select PDF or TXT files
accept:
  - .pdf
  - .txt



/* Multiple */
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
label: Input accepts multiple files
id: multiple
hint: Select one or more files
multiple: true



/* Error */
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
id: error
label: Input has an error
hint: Select any valid file
error: true
errorMessage: Display a helpful error message



/* Disabled */
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
id: disabled
label: Input in a disabled state
disabled: true