• Components
  • Input file

File 

@!jrmc.form.input({ type: 'file' })
@!jrmc.form.file()
<input
  type="file"
  class="file-input"
  
  
  
  
  value=""
/>

<input
  type="file"
  class="file-input"
  
  
  
  
  value=""
/>

File bordered 

@!jrmc.form.file({ class: 'file-input-bordered' })
<input
  type="file"
  class="file-input file-input-bordered"
  
  
  
  
  value=""
/>

File color 

@!jrmc.form.file({ class: 'file-input-primary' })
@!jrmc.form.file({ class: 'file-input-secondary' })
@!jrmc.form.file({ class: 'file-input-accent' })
@!jrmc.form.file({ class: 'file-input-info' })
@!jrmc.form.file({ class: 'file-input-success' })
@!jrmc.form.file({ class: 'file-input-warning' })
@!jrmc.form.file({ class: 'file-input-error' })
<input
  type="file"
  class="file-input file-input-primary"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-secondary"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-accent"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-info"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-success"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-warning"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-error"
  
  
  
  
  value=""
/>

File size 

@!jrmc.form.file({ class: 'file-input-lg file-input-bordered' })
@!jrmc.form.file({ class: 'file-input-md file-input-bordered' })
@!jrmc.form.file({ class: 'file-input-sm file-input-bordered' })
@!jrmc.form.file({ class: 'file-input-xs file-input-bordered' })
<input
  type="file"
  class="file-input file-input-lg file-input-bordered"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-md file-input-bordered"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-sm file-input-bordered"
  
  
  
  
  value=""
/>


<input
  type="file"
  class="file-input file-input-xs file-input-bordered"
  
  
  
  
  value=""
/>

File disabled 

@!jrmc.form.file({ disabled: true })
<input
  type="file"
  class="file-input"
  
  
  
  disabled
  value=""
/>

File ghost 

@!jrmc.form.file({ class: 'file-input-ghost' })
<input
  type="file"
  class="file-input file-input-ghost"
  
  
  
  
  value=""
/>

File control 

@jrmc.form.control({ name: 'avatar', class: 'w-full max-w-xs', label: 'Avatar' })
  @!jrmc.form.file({ class: 'file-input-bordered' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="avatar">
<span class="label-text" >
  Avatar</span>  
</label>
  <input
  type="file"
  class="file-input file-input-bordered"
   name="avatar"
   id="avatar"
  
  
  value=""
/>


</div>

File hint

Max size: 2M 
@jrmc.form.control({ name: 'avatar', class: 'w-full max-w-xs', hint: 'Max size: 2M' })
  @!jrmc.form.file({ class: 'file-input-bordered' })
@end
<div class="form-control mb-5 w-full max-w-xs" >
<label class="label cursor-pointer" for="avatar">
<span class="label-text" >
  Avatar:</span>  
</label>
  <input
  type="file"
  class="file-input file-input-bordered"
   name="avatar"
   id="avatar"
  
  
  value=""
/>


<div class="label" >    <span class="label-text-alt text-warning">Max size: 2M</span>
</div></div>