File input

Displays a file input.

Fileinput by drag and drop, single file

<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="id_6a3f8b2d9f138" data-uid="6a3f8b2d9f142" data-component="form" method="POST" action="#">

    
    
    <!-- fileinput.blade.php -->
<div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="1" data-js-file-min="0" data-js-file-is-multi="0" id="id_6a3f8b2d9ea7d" data-uid="6a3f8b2d9eaa0" data-component="fileinput">
        <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files" data-uid="6a3f8b2d9ed4b" data-component="element">
        <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6a3f8b2d9eb33" data-uid="6a3f8b2d9eb43" data-component="notice" aria-labelledby="notice__text__id_6a3f8b2d9eb33">
    
    
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a3f8b2d9ecb0" data-component="icon">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_6a3f8b2d9eb33" data-js-notice-message="true" class="c-notice__message">
                            
                        <!-- Message -->
        </span>
    
    
    </div>
    </template>
                <label class="c-element c-field__label c-fileinput__label" for="input_id_6a3f8b2d9ea7d" id="label_id_6a3f8b2d9ea7d" data-js-file="label" data-uid="6a3f8b2d9ed8e" data-component="element">
        Choose files
    </label>
    
    <!-- Actual input -->
    <input type="file"
        class="c-fileinput__input"
        name="files"
        id="input_id_6a3f8b2d9ea7d"
        accept="audio/*,video/*,image/*"
        
        
        data-js-file="input"
        aria-hidden="true"
        tabindex="-1"
    >

    <div class="c-fileinput__inner c-fileinput__inner--area">
        <div class="c-fileinput__area" data-js-file="area">

          <!-- typography.blade.php   original: p -->
<p class="c-typography c-field__description c-fileinput__description u-margin__top--1 u-margin__bottom--3 c-typography__variant--meta" data-uid="6a3f8b2d9ee2b" data-component="typography">
    Display as a file input area (dropzone, single file).
</p>  
  <!-- This button is used to trigger the file input -->
      <button class="c-button c-fileinput__button js-file-input-button c-button__basic c-button__basic--default c-button--md" data-js-file="button" aria-live="polite" type="button" aria-label="Select file" data-uid="6a3f8b2d9ee9f" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--file-upload c-icon--material c-icon--material-file_upload material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9eee5" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Select file
            </span>
        
    </span> </button>
  <!-- This button is used to illustrate drag and drop, it has no function -->
      <button class="c-button js-file-input-drop c-button__basic c-button__basic--default c-button--md" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here" data-uid="6a3f8b2d9ef38" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--place-item c-icon--material c-icon--material-place_item material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="place_item" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9ef6e" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Drop files here
            </span>
        
    </span> </button>
  <div class="c-fileinput__file-list" data-js-file="list">
            <template data-js-file="listitem-template">
    <div class="c-fileinput__item" data-js-file="listitem" data-js-file-id="">
        <div class="c-fileinput__item-container">
            <div class="c-fileinput__item-icon-wrapper">
                    <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__item-icon c-icon--attach-file c-icon--material c-icon--material-attach_file material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-js-file="icon" data-material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9efd4" data-component="icon">
                    </span>
            </div>

            <div class="c-fileinput__item-text">
                <span class="c-fileinput__item-name" data-js-file="filename"></span>
                <span class="c-fileinput__item-size" data-js-file="filesize"></span>
            </div>

            <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                    <button class="c-button c-fileinput__item-remove-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" aria-label="delete" data-js-file="remove" type="button" data-uid="6a3f8b2d9f015" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9f04c" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>            </div>
        </div>
    </div>
</template>      </div>
  
   <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
            <div class="c-element" data-uid="6a3f8b2d9f0b3" data-component="element">
        <div class="c-element c-fileinput__accepted-files" data-uid="6a3f8b2d9f088" data-component="element">
        Allowed files: : Audios Videos Images
    </div>
    </div>
        
            <div class="c-element c-fileinput__filecounter" data-js-file="counter" data-counter-current="0" data-counter-max="1" aria-hidden="true" aria-live="polite" data-uid="6a3f8b2d9f0db" data-component="element">
        /
    </div>
        
   </div>
</div>    </div>
</div>
</form>

@form(['classList' => ['u-padding__y--4']])
    @fileinput([
        'multiple' => false,
        'label' => 'Choose files',
        'description' => 'Display as a file input area (dropzone, single file).',
    ])
    @endfileinput
@endform

Fileinput by drag and drop, multiple files

<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="id_6a3f8b2d9f8ba" data-uid="6a3f8b2d9f8c2" data-component="form" method="POST" action="#">

    
    
    <!-- fileinput.blade.php -->
<div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="10" data-js-file-min="0" data-js-file-is-multi="1" id="id_6a3f8b2d9f4cf" data-uid="6a3f8b2d9f4e2" data-component="fileinput">
        <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files" data-uid="6a3f8b2d9f5a9" data-component="element">
        <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6a3f8b2d9f519" data-uid="6a3f8b2d9f525" data-component="notice" aria-labelledby="notice__text__id_6a3f8b2d9f519">
    
    
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a3f8b2d9f560" data-component="icon">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_6a3f8b2d9f519" data-js-notice-message="true" class="c-notice__message">
                            
                        <!-- Message -->
        </span>
    
    
    </div>
    </template>
                <label class="c-element c-field__label c-fileinput__label" for="input_id_6a3f8b2d9f4cf" id="label_id_6a3f8b2d9f4cf" data-js-file="label" data-uid="6a3f8b2d9f5dd" data-component="element">
        Choose files
    </label>
    
    <!-- Actual input -->
    <input type="file"
        class="c-fileinput__input"
        name="files[]"
        id="input_id_6a3f8b2d9f4cf"
        accept="audio/*,video/*,image/*"
        multiple
        
        data-js-file="input"
        aria-hidden="true"
        tabindex="-1"
    >

    <div class="c-fileinput__inner c-fileinput__inner--area">
        <div class="c-fileinput__area" data-js-file="area">

          <!-- typography.blade.php   original: p -->
<p class="c-typography c-field__description c-fileinput__description u-margin__top--1 u-margin__bottom--3 c-typography__variant--meta" data-uid="6a3f8b2d9f62a" data-component="typography">
    Display as a file input area (dropzone, multi file).
</p>  
  <!-- This button is used to trigger the file input -->
      <button class="c-button c-fileinput__button js-file-input-button c-button__basic c-button__basic--default c-button--md" data-js-file="button" aria-live="polite" type="button" aria-label="Select file" data-uid="6a3f8b2d9f669" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--file-upload c-icon--material c-icon--material-file_upload material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9f6a3" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Select file
            </span>
        
    </span> </button>
  <!-- This button is used to illustrate drag and drop, it has no function -->
      <button class="c-button js-file-input-drop c-button__basic c-button__basic--default c-button--md" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here" data-uid="6a3f8b2d9f6e7" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--place-item c-icon--material c-icon--material-place_item material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="place_item" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9f724" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Drop files here
            </span>
        
    </span> </button>
  <div class="c-fileinput__file-list" data-js-file="list">
            <template data-js-file="listitem-template">
    <div class="c-fileinput__item" data-js-file="listitem" data-js-file-id="">
        <div class="c-fileinput__item-container">
            <div class="c-fileinput__item-icon-wrapper">
                    <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__item-icon c-icon--attach-file c-icon--material c-icon--material-attach_file material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-js-file="icon" data-material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9f77d" data-component="icon">
                    </span>
            </div>

            <div class="c-fileinput__item-text">
                <span class="c-fileinput__item-name" data-js-file="filename"></span>
                <span class="c-fileinput__item-size" data-js-file="filesize"></span>
            </div>

            <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                    <button class="c-button c-fileinput__item-remove-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" aria-label="delete" data-js-file="remove" type="button" data-uid="6a3f8b2d9f7be" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9f7f5" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>            </div>
        </div>
    </div>
</template>      </div>
  
   <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
            <div class="c-element" data-uid="6a3f8b2d9f85e" data-component="element">
        <div class="c-element c-fileinput__accepted-files" data-uid="6a3f8b2d9f833" data-component="element">
        Allowed files: : Audios Videos Images
    </div>
    </div>
        
            <div class="c-element c-fileinput__filecounter" data-js-file="counter" data-counter-current="0" data-counter-max="10" aria-hidden="true" aria-live="polite" data-uid="6a3f8b2d9f889" data-component="element">
        /
    </div>
        
   </div>
</div>    </div>
</div>
</form>

@form(['classList' => ['u-padding__y--4']])
    @fileinput([
        'multiple' => true,
        'label' => 'Choose files',
        'description' => 'Display as a file input area (dropzone, multi file).',
    ])
    @endfileinput
@endform

Fileinput with minimum number of files

Choose files

Display as a file input area (dropzone, multi file).

Allowed files: : Audios Videos Images

<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="id_6a3f8b2da0047" data-uid="6a3f8b2da004f" data-component="form" method="POST" action="#">

    
    
    <!-- fileinput.blade.php -->
<div class="c-field c-fileinput c-fileinput--preview is-empty" data-js-file-preview="1" data-js-file="dropzone" data-js-file-max="10" data-js-file-min="2" data-js-file-is-multi="1" id="id_6a3f8b2d9fc31" data-uid="6a3f8b2d9fc43" data-component="fileinput">
        <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files" data-uid="6a3f8b2d9fcf4" data-component="element">
        <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_6a3f8b2d9fc76" data-uid="6a3f8b2d9fc81" data-component="notice" aria-labelledby="notice__text__id_6a3f8b2d9fc76">
    
    
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a3f8b2d9fcb7" data-component="icon">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_6a3f8b2d9fc76" data-js-notice-message="true" class="c-notice__message">
                            
                        <!-- Message -->
        </span>
    
    
    </div>
    </template>
                <label class="c-element c-field__label c-fileinput__label" for="input_id_6a3f8b2d9fc31" id="label_id_6a3f8b2d9fc31" data-js-file="label" data-uid="6a3f8b2d9fd26" data-component="element">
        Choose files
    </label>
    
    <!-- Actual input -->
    <input type="file"
        class="c-fileinput__input"
        name="files[]"
        id="input_id_6a3f8b2d9fc31"
        accept="audio/*,video/*,image/*"
        multiple
        
        data-js-file="input"
        aria-hidden="true"
        tabindex="-1"
    >

    <div class="c-fileinput__inner c-fileinput__inner--area">
        <div class="c-fileinput__area" data-js-file="area">

          <!-- typography.blade.php   original: p -->
<p class="c-typography c-field__description c-fileinput__description u-margin__top--1 u-margin__bottom--3 c-typography__variant--meta" data-uid="6a3f8b2d9fd78" data-component="typography">
    Display as a file input area (dropzone, multi file).
</p>  
  <!-- This button is used to trigger the file input -->
      <button class="c-button c-fileinput__button js-file-input-button c-button__basic c-button__basic--default c-button--md" data-js-file="button" aria-live="polite" type="button" aria-label="Select file" data-uid="6a3f8b2d9fdb4" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--file-upload c-icon--material c-icon--material-file_upload material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9fded" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Select file
            </span>
        
    </span> </button>
  <!-- This button is used to illustrate drag and drop, it has no function -->
      <button class="c-button js-file-input-drop c-button__basic c-button__basic--default c-button--md" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here" data-uid="6a3f8b2d9fe31" data-component="button">   
     <span class="c-button__label"> 
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--place-item c-icon--material c-icon--material-place_item material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="place_item" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9fe67" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Drop files here
            </span>
        
    </span> </button>
  <div class="c-fileinput__file-list" data-js-file="list">
            <template data-js-file="listitem-template">
    <div class="c-fileinput__item" data-js-file="listitem" data-js-file-id="">
    <div class="c-fileinput__item-preview" data-js-file="preview">
                <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__attachment-icon c-icon--attach-file c-icon--material c-icon--material-attach_file material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xl" aria-hidden="false" data-js-file="icon" data-material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9fed2" data-component="icon">
                    </span>
    </div>
        <div class="c-fileinput__info-container">
            <span class="c-fileinput__item-name" data-js-file="filename"></span>
            <span class="c-fileinput__item-size" data-js-file="filesize"></span>
        </div>

        <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                <button class="c-button c-fileinput__item-remove-button c-button__filled c-button__filled--primary c-button--xs" data-js-file="remove" type="button" data-uid="6a3f8b2d9ff4e" data-component="button">   
     <span class="c-button__label"> 
                    <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__item-icon c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-js-file="icon" data-material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a3f8b2d9ff13" data-component="icon">
                    </span>
        
        
        
    </span> </button>        </div>
    </div>
</template>      </div>
  
   <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
            <div class="c-element" data-uid="6a3f8b2d9ffb2" data-component="element">
        <div class="c-element c-fileinput__accepted-files" data-uid="6a3f8b2d9ff87" data-component="element">
        Allowed files: : Audios Videos Images
    </div>
    </div>
        
            <div class="c-element c-fileinput__filecounter" data-js-file="counter" data-counter-current="0" data-counter-max="10" aria-hidden="true" aria-live="polite" data-uid="6a3f8b2d9ffdc" data-component="element">
        /
    </div>
        
   </div>
</div>    </div>
</div>
    <br>
        <button class="c-button c-button__filled c-button__filled--default c-button--md" type="submit" aria-label="Submit" data-uid="6a3f8b2da0019" data-component="button">   
     <span class="c-button__label"> 
        
        
                    <span class="c-button__label-text ">
                Submit
            </span>
        
    </span> </button>
</form>

@form(['classList' => ['u-padding__y--4']])
    @fileinput([
        'multiple' => true,
        'filesMin' => 2,
        'label' => 'Choose files',
        'preview' => true,
        'description' => 'Display as a file input area (dropzone, multi file).',
    ])
    @endfileinput
    <br>
    @button([
        'type' => 'submit',
        'text' => 'Submit',
    ])
    @endbutton
@endform

Key	Default value	Type	Available values	Description
description		string	-	Additional description or instructions.
name	files	string	-	files
accept	audio/,video/,image/*	string	-	What file types to accept. Use MIME types. Example: audio/,video/,image/*
multiple	false	boolean	-	Allow single or multiple files
preview	false	boolean	-	-
maxSize		NULL	-	Maximum file size allowed in MB. Number (int) in bytes or string (small, medium, large). Default is null (no limit).
uploadErrorMessage		NULL	-	Message to show when upload fails
uploadErrorMessageMinFiles		NULL	-	Message to show when minimum number of files is not met
icon	file_upload	string	-	@link:component/icon
required	false	boolean	-	If field is required
filesMax	1	integer	-	Maximum number of files (int). Foced to 1 if multiple is false. Default 10 for multiple.
filesMin	0	integer	-	Minimum number of files (int). Default is 0.
label		string	-	Label to show on the field
buttonLabel	Select file	string	-	What text to show on the button
buttonRemoveLabel	Remove file	string	-	What text to show on the remove button
buttonDropLabel	Drop files here	string	-	A label for the drop area
allowedFileTypesLabel	Allowed files:	string	-	Label for allowed file types
fileTypeVideosLabel	Videos	string	-	Label for video file types
fileTypeImagesLabel	Images	string	-	Label for image file types
fileTypeAudioLabel	Audios	string	-	Label for audio file types
maximumSizeLabel	Maximum size	string	-	Maximum size
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes

Key	Default value	Type	Available values	Description
--c-fileinput--border-radius	var(--border-radius)	range	-	Border Radius
--c-fileinput--border-width	var(--border-width)	range	-	Size
--c-fileinput--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-fileinput--color--surface	var(--color--surface)	color	-	Surface
--c-fileinput--color--danger	var(--color--danger)	color	-	Danger
--c-fileinput--color--success	var(--color--success)	color	-	Success
--c-fileinput--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.
--c-fileinput--font-size-80	var(--font-size-80)	range	-	Two steps below base in the type scale.
--c-fileinput--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-fileinput--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-fileinput--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-fileinput--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-fileinput--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-fileinput--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.
--c-fileinput--color--danger-border	var(--color--danger-border)	color	-	Manual companion token for danger border and emphasis states.
--c-fileinput--color--danger-contrast	var(--color--danger-contrast)	color	-	Danger Contrast

File input

Fileinput by drag and drop, single file

Fileinput by drag and drop, multiple files

Fileinput with minimum number of files

Parameters (Blade)

Parameters (CSS)