Styled Example
About File Selector
The File Selector component provides a user-friendly interface for file uploads with support for both click-to-select and drag-and-drop functionality.
Accessibility
Markup
The role="group" attribute groups the form element label and the form control file input together. The aria-labelledby attribute provides an accessible label for the group, while the HTML input type file is labeled using a standard id/for attribute relationship.
Base
Basic File Selector
States
Error State
Dragover State
This shows the visual state when files are being dragged over the dropzone.
Dragover with Error
Image
Multi Line / Image
Use as a dedicated dropzone for image files only. May require a cropping control.
Integrated
Invisible Dropzone (Container)
Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page.
Droppable Container
This entire card area is a dropzone. You can drag files anywhere within this container to upload them.