File upload

Standard

Default

A default file upload lets users select and upload a single file.

Show code

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">Upload a file</label>
  <input class="govuk-file-upload" type="file" id="file-upload-1" name="file-upload-1">
</div>

---
import { FormGroup, InputLabel, FileUpload } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup>
  <InputLabel for="file-upload-1">Upload a file</InputLabel>
  <FileUpload id="file-upload-1" name="file-upload-1" />
</FormGroup>

import { FormGroup, InputLabel, FileUpload } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel htmlFor="file-upload-1">Upload a file</InputLabel>
      <FileUpload id="file-upload-1" name="file-upload-1" />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, FileUpload } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup>
  <InputLabel for="file-upload-1">Upload a file</InputLabel>
  <FileUpload id="file-upload-1" name="file-upload-1" />
</FormGroup>

import { FormGroup, InputLabel, FileUpload } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup>
      <InputLabel for="file-upload-1">Upload a file</InputLabel>
      <FileUpload id="file-upload-1" name="file-upload-1" />
    </FormGroup>
  );
}

When to use this component

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

We improved the component in March 2025, so you’ll need to enable the improved File upload component as a new feature.

Read a blog post about design tips for helping users upload things.