File input

Use to allow users to upload files. View this component on GitHub

Contents

Basic

The file input component can be used for file upload to a service or application.

<admiralty-file-input></admiralty-file-input>

<admiralty-file-input></admiralty-file-input>

<AdmiraltyFileInput></AdmiraltyFileInput>

Accessibility

Contrast is set to an approved level. Use helpful labelling for this component.

Props

NameTypeDefaultDescriptioninvalidbooleanfalseWhether to show that the file input is in an invalid state.invalid-messagestringnullThe message to show when the file input is invalid.labelstring'Click to choose a file or drag it'Used to display instructions to the user and is replaced with the filename the user inputsmultiplebooleanfalseIf true, enables multiple files to be selected or dragged

Events

NameDescriptionfileInputChangeEmitted when the added file(s) changes

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription--admiralty-file-input-font-sizeFont size of the file input--admiralty-file-input-font-weightFont weight of the file input--admiralty-file-input-icon-font-sizeFont size of the file input icon--admiralty-file-input-icon-font-weightFont weight of the file input icon--admiralty-file-input-icon-marginMargin for the file input icon.--admiralty-file-input-label-font-sizeFont size of the file input label--admiralty-file-input-label-font-weightFont weight of the file input label--admiralty-file-input-label-marginMargin for the file input label.--admiralty-file-input-marginMargin for the file input.

Slots

No slots available for this component.

Privacy PolicyAccessibility