GC Design System Components
GC Design System Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Table Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

File uploader
<gcds-file-uploader>

Also called: file upload, file input, dropzone.

A file uploader is a space to select and add supporting documentation.

  • GitHub
  • Figma

File uploader component preview

On this page

Coding and accessibility for file uploader

Apply required attributes

Always use the following required attributes with gcds-file-uploader:

  • name
  • label
  • uploader-id

Allow multiple files

Use the multiple attribute to allow the selection of more than one file.

Define file types

Use the accept attribute to define the file types that the file uploader can accept.

Add hint text

Use the hint attribute to add hint text.

Hide the label

  • Set the hide-label attribute to true to visually hide the label while maintaining it for assistive technologies.

  • Avoid adding hint text when the label is hidden.

Add validation and error messages

  • Use the required attribute to activate the built-in error messages and validation for file uploader.
  • Fields with specific input requirements will validate if the entry is invalid, even if it is not required.
  • For optional fields that need validation, like email address formats, add custom validation with a custom error message.

Examples Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Essential attributes These attributes are needed for the component to function correctly.

label

The label attribute defines the label for the file uploader.

<gcds-file-uploader uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

name

The name attribute identifies the file uploader component within a form. It is used to reference the uploaded files when a form is submitted.

<gcds-file-uploader uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

uploader-id

The uploader-id attribute specifies the unique identifier for the file uploader.

<gcds-file-uploader uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

Optional attributes These attributes allow you to customize or extend the component’s behaviour and presentation.

accept

The accept attribute defines the file types the file uploader accepts.

<gcds-file-uploader accept="image/*" uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

autofocus

The autofocus attribute controls whether the file uploader will be focused automatically when the page loads. By default, it is set to false. When set to true, the file uploader is focused on render.

<gcds-file-uploader autofocus uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

disabled

The disabled attribute controls whether the file uploader is disabled or not. By default, it is set to false.

<gcds-file-uploader disabled uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

error-message

The error-message attribute defines the error message to display for an invalid file input.

<gcds-file-uploader error-message="Error message" uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

form

The form attribute specifies the ID of the form that the file uploader belongs to.

<gcds-file-uploader form="form-id" uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

hide-label

The hide-label attribute controls whether the label is hidden or not.

<gcds-file-uploader hide-label uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

hint

The hint attribute defines the hint text displayed under the label.

<gcds-file-uploader hint="Hint / Example message." uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

multiple

The multiple attribute controls whether the user is allowed to select more than one file.

<gcds-file-uploader multiple uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

required

The required attribute controls whether the file input is required or not. When set to true, it adds “required” after the label, and activates the required validator.

<gcds-file-uploader required uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

validate-on

The validate-on attribute defines the validation event for the file uploader.

<gcds-file-uploader validate-on="other" required uploader-id="file-uploader-preview" label="Label" name="file-uploader-preview">
</gcds-file-uploader>

Code builder

Generate an instance of the component you need by selecting its code properties.

  1. Explore by choosing different code values to generate the instance you want.

  2. Get the code and pull it into your environment.

  3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2026-06-10