Components

File input

The file input component allows users select and upload files.

Component status
Hint
Error
Multiple
Improved file input component

HTML

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="proof-of-identity">
        Upload proof of identity
      </label>
    </h4>
  </div>
  <input id="proof-of-identity" class="tna-file-input " name="proof_of_identity" type="file">
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the file input field.
headingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the file input title (`xl`, `l`, `m`, `s` or `xs`).
id	string	Required. A unique ID for the file input component.
name	string	Required. The name of the form field.
hint	string	An optional hint to display above the form field.
multiple	boolean	If true, allows multiple files to be selected. Default value: `false`
droppable	boolean	If true, allows drag and drop functionality. Default value: `false`
error	object	If set, the details of any errors. See macro options for error.
formGroupClasses	string	Classes to add to the file input group.
formGroupAttributes	object	HTML attributes (for example data attributes) to add to the file input form group.
classes	string	Classes to add to the file input.
attributes	object	HTML attributes (for example data attributes) to add to the file input.

Options for error
Name	Type	Description
text	string	Required. The error text to display.

{% from "nationalarchives/components/file-input/macro.njk" import tnaFileInput %}

{{ tnaFileInput({
  label: "Upload proof of identity",
  headingLevel: 4,
  headingSize: "m",
  id: "proof-of-identity",
  name: "proof_of_identity"
}) }}

Component status

Phase: To be reviewed
Tested without CSS: Yes
Passed DAC audit: Not yet audied
Analytics integrated: Yes
Documentation complete: No

Hint

Open this example in new tab

HTML

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="proof-of-identity">
        Upload proof of identity
      </label>
    </h4>
    <p id="proof-of-identity-hint" class="tna-form__hint">
      This should be a scanned copy of your passport or driving licence in a PDF, JPG or PNG format and no larger than 5MB
    </p>
  </div>
  <input id="proof-of-identity" class="tna-file-input " name="proof_of_identity" type="file" aria-describedby="proof-of-identity-hint ">
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the file input field.
headingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the file input title (`xl`, `l`, `m`, `s` or `xs`).
id	string	Required. A unique ID for the file input component.
name	string	Required. The name of the form field.
hint	string	An optional hint to display above the form field.
multiple	boolean	If true, allows multiple files to be selected. Default value: `false`
droppable	boolean	If true, allows drag and drop functionality. Default value: `false`
error	object	If set, the details of any errors. See macro options for error.
formGroupClasses	string	Classes to add to the file input group.
formGroupAttributes	object	HTML attributes (for example data attributes) to add to the file input form group.
classes	string	Classes to add to the file input.
attributes	object	HTML attributes (for example data attributes) to add to the file input.

Options for error
Name	Type	Description
text	string	Required. The error text to display.

{% from "nationalarchives/components/file-input/macro.njk" import tnaFileInput %}

{{ tnaFileInput({
  label: "Upload proof of identity",
  headingLevel: 4,
  headingSize: "m",
  id: "proof-of-identity",
  name: "proof_of_identity",
  hint: "This should be a scanned copy of your passport or driving licence in a PDF, JPG or PNG format and no larger than 5MB"
}) }}

Error

Open this example in new tab

HTML

<div class="tna-form__group tna-form__group--error">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="proof-of-identity">
        Upload proof of identity
      </label>
    </h4>
    <p id="proof-of-identity-hint" class="tna-form__hint">
      This should be a scanned copy of your passport or driving licence in a PDF, JPG or PNG format.
    </p>
    <p id="proof-of-identity-error" class="tna-form__error-message">
      <span class="tna-!--visually-hidden">Error:</span> Upload a file in a supported format
    </p>
  </div>
  <input id="proof-of-identity" class="tna-file-input " name="proof_of_identity" type="file" aria-describedby="proof-of-identity-hint proof-of-identity-error">
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the file input field.
headingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the file input title (`xl`, `l`, `m`, `s` or `xs`).
id	string	Required. A unique ID for the file input component.
name	string	Required. The name of the form field.
hint	string	An optional hint to display above the form field.
multiple	boolean	If true, allows multiple files to be selected. Default value: `false`
droppable	boolean	If true, allows drag and drop functionality. Default value: `false`
error	object	If set, the details of any errors. See macro options for error.
formGroupClasses	string	Classes to add to the file input group.
formGroupAttributes	object	HTML attributes (for example data attributes) to add to the file input form group.
classes	string	Classes to add to the file input.
attributes	object	HTML attributes (for example data attributes) to add to the file input.

Options for error
Name	Type	Description
text	string	Required. The error text to display.

{% from "nationalarchives/components/file-input/macro.njk" import tnaFileInput %}

{{ tnaFileInput({
  label: "Upload proof of identity",
  headingLevel: 4,
  headingSize: "m",
  id: "proof-of-identity",
  name: "proof_of_identity",
  hint: "This should be a scanned copy of your passport or driving licence in a PDF, JPG or PNG format.",
  error: {
    text: "Upload a file in a supported format"
  }
}) }}

Multiple

Open this example in new tab

HTML

<div class="tna-form__group">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="proof-of-identity">
        Upload proof of identity
      </label>
    </h4>
  </div>
  <input id="proof-of-identity" class="tna-file-input " name="proof_of_identity" type="file" multiple>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the file input field.
headingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the file input title (`xl`, `l`, `m`, `s` or `xs`).
id	string	Required. A unique ID for the file input component.
name	string	Required. The name of the form field.
hint	string	An optional hint to display above the form field.
multiple	boolean	If true, allows multiple files to be selected. Default value: `false`
droppable	boolean	If true, allows drag and drop functionality. Default value: `false`
error	object	If set, the details of any errors. See macro options for error.
formGroupClasses	string	Classes to add to the file input group.
formGroupAttributes	object	HTML attributes (for example data attributes) to add to the file input form group.
classes	string	Classes to add to the file input.
attributes	object	HTML attributes (for example data attributes) to add to the file input.

Options for error
Name	Type	Description
text	string	Required. The error text to display.

{% from "nationalarchives/components/file-input/macro.njk" import tnaFileInput %}

{{ tnaFileInput({
  label: "Upload proof of identity",
  headingLevel: 4,
  headingSize: "m",
  id: "proof-of-identity",
  name: "proof_of_identity",
  multiple: true
}) }}

Improved file input component

If JavaScript is available to the user, you can enhance the file input by adding droppable: true, which:

enlarges the available drag and drop area for files
improves accessibility
visually looks more like other components

If JavaScript fails to load, the component reverts to the standard form input.

Open this example in new tab

HTML

<div class="tna-form__group" data-module="tna-file-input">
  <div class="tna-form__group-contents">
    <h4 class="tna-form__heading tna-form__heading--m">
      <label class="tna-form__label" for="proof-of-identity">
        Upload proof of identity
      </label>
    </h4>
  </div>
  <input id="proof-of-identity" class="tna-file-input " name="proof_of_identity" type="file">
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
label	string	Required. The label for the file input field.
headingLevel	number	Required. The heading level which represents an element from `<h1>` through to `<h6>`.
headingSize	string	The physical size of the file input title (`xl`, `l`, `m`, `s` or `xs`).
id	string	Required. A unique ID for the file input component.
name	string	Required. The name of the form field.
hint	string	An optional hint to display above the form field.
multiple	boolean	If true, allows multiple files to be selected. Default value: `false`
droppable	boolean	If true, allows drag and drop functionality. Default value: `false`
error	object	If set, the details of any errors. See macro options for error.
formGroupClasses	string	Classes to add to the file input group.
formGroupAttributes	object	HTML attributes (for example data attributes) to add to the file input form group.
classes	string	Classes to add to the file input.
attributes	object	HTML attributes (for example data attributes) to add to the file input.

Options for error
Name	Type	Description
text	string	Required. The error text to display.

{% from "nationalarchives/components/file-input/macro.njk" import tnaFileInput %}

{{ tnaFileInput({
  label: "Upload proof of identity",
  headingLevel: 4,
  headingSize: "m",
  id: "proof-of-identity",
  name: "proof_of_identity",
  droppable: true
}) }}

This website uses cookies

File input

Contents

HTML

Nunjucks

Component status

Hint

HTML

Nunjucks

Error

HTML

Nunjucks

Multiple

HTML

Nunjucks

Improved file input component

HTML

Nunjucks