Vivid Logo Vivid

File Picker

The file picker component enables users to select files either by opening a file selection dialog or by using drag-and-drop functionality.

Labelling

Label Text

The label attribute provides a short description of the purpose of the File Picker.

If you can not use the visible label, provide it using the aria-label attribute.

It will be announced by screen readers so that those users will know the purpose of the Select.

Helper text

The helper-text attribute provides additional information about the purpose of the File Picker.
To add HTML to the helper text, use the helper-text slot.

Contextual Help

You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.

Validation Feedback

Error Text

The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.

Disabled

The disabled attribute disables the File Picker.

Size

Use the size attribute to set the file picker's block-size.