Bootstrap 5 Form Controls File Input

Bootstrap5 Form controls File input provides customized ways to take the input of the files, i.e., the file input can accept as default, or can accept multiple files at once, or can be disabled the file input. This can also be done for any file input size, which varies from small size to large. This can be done by using the .form-control class that helps to control file input. To control the different sizes of the file input, we can simply specify the .form-control class followed by the form-control-sm or form-control-lg attribute. By default, form controls have a width of 100%.

Form controls File input Classes:

• form-control-sm: This class helps to reduce the size to small for the file input.
• form-control-lg: This class helps to increase the size to large for the file input.

Form controls File input Attributes:

• default: This attribute does not require to specify explicitly.
• multiple: This attribute enables the acceptance of multiple files for input at once.
• disabled: This attribute disables or inactivates the input field to accept any file.

Syntax:

<input class="form-control" 
       type="file" multiple>

Example 1: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the default & multiple file input.

Output:

 

Example 2: This example describes the basic usage of the Form controls File input in Bootstrap5 by implementing the small file input with multiple attribute & large file input with the disabled attribute.

Output:

 

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#file-input