UI Library
File Input
Single, multi-file, and validation flows.
Basic
File inputThe file input is used to selecting files.
Density
File inputUse density to reduce the file input height.
Variant
Outlined
Filled
Solo
Plain
Underlined
Accept
File inputThe file input can accept only specific media formats/file types.
Chips
File input w/ chips
contract.pdfinvoice.xlsxbrand-kit.zip
Counter
File inputWhen using show-size along with counter, the total number of files and size will be displayed under the input.
Multiple
File inputThe file input can contain multiple files at the same time.
Prepend icon
File inputThe file input has a default prepend icon that can be adjusted globally.
Show size
contract.pdf2.3 MB2.3 MB
invoice.xlsx1.1 MB1.1 MB
brand-kit.zip18.4 MB18.4 MB
Validation
AvatarYou can use the rules prop to create custom validation parameters.Avatar size should be less than 1 MB!
Selection slot
File inputUsing the selection slot, you can customize the appearance of your input selections.
contract.pdfinvoice.xlsxbrand-kit.zip
Loading
File inputUse loading prop to display a linear progress bar.