Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. File field

File field

The file upload field allows users to upload files.

You should only ask users to upload something if it’s critical to the delivery of your service.

File upload field with label and hint

Input

= f.govuk_file_field :profile_photo,
  label: { text: 'Identification photograph' },
  hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' }
<%= f.govuk_file_field :profile_photo, label: { text: 'Identification photograph' }, hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' } %>

Rendered output

Upload a clear colour photograph of yourself looking straight at the camera

HTML output

<div class="govuk-form-group">
  <label for="person-profile-photo-field" class="govuk-label">
    Identification photograph
  </label>
  <span class="govuk-hint" id="person-profile-photo-hint">
    Upload a clear colour photograph of yourself looking straight at the camera
  </span>
  <input id="person-profile-photo-field" class="govuk-file-upload" aria-describedby="person-profile-photo-hint" type="file" name="person[profile_photo]" />
</div>