Ui.FileInput

An input for selecting a file. If a file is selected it shows its name, content-type and size.

Interactive Demo

You can play around with a Ui.FileInput below using the controls.

Accept
Select Label
Select Another Label
Clear Label
Size (16px)
<Ui.FileInput
selectAnotherLabel="Click to select a different file."
selectLabel="Select a file"
size={Ui.Size.Px(16)}
clearLabel="Clear"
accept="*"/>
Size

The size of the component can be set with the size property.

<>
<Ui.FileInput size={Ui.Size.Px(12)}/>
<Ui.FileInput size={Ui.Size.Px(16)}/>
<Ui.FileInput size={Ui.Size.Px(20)}/>
</>
Accept

The value for the accept attribute of a file input can be set using theaccept property.

<>
<Ui.FileInput selectLabel="Select an image!" accept="image/*"/>
<Ui.FileInput selectLabel="Select a video!" accept="video/*"/>
<Ui.FileInput selectLabel="Select a music file!" accept="audio/*"/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.