Preview

Usage

<cs-file-input text="Choose file"></cs-file-input>
<cs-file-input text="Choose files" multiple></cs-file-input>

Properties

acceptstring

Specifies the native file input accept attribute to describe the allow-list of file types.

aria-labelstring default: 'Choose file'

Adds aria-label to the file input element. Use this to provide an accessible name for file inputs that don't have visible text, and to distinguish between multiple file inputs with identical visible text.

aria-requiredboolean default: null

Specifies whether to add aria-required to the file upload control.

childrenstring

Text displayed in the file input component. Used as the aria label if ariaLabel is not defined.

multipleboolean default: false

Specifies the native file input multiple attribute to allow users entering more than one file.

valueReadonlyArray<File>required

Specifies the currently selected file(s). If you want to clear the selection, use empty array.

variant'button' | 'icon' default: 'button'

Variant of the file input. Defaults to "button".

Events

changeCustomEvent<FileInputProps.ChangeDetail>

Called when the user selects new file(s), or removes a file. The event detail contains the current value of the component.