<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>
@jrmc.form.control({ name: 'avatar', class: 'w-full max-w-xs', hint: 'Max size: 2M' })
@!jrmc.form.file({ class: 'file-input-bordered' })
@end
Doc : daisyui file input
File Input is a an input field for uploading files.
| Class name | Type | |
|---|---|---|
| file-input | Component | For <input> element |
| file-input-bordered | Modifier | Adds border to input |
| file-input-ghost | Modifier | Adds ghost style to input |
| file-input-primary | Modifier | Adds primary color to input |
| file-input-secondary | Modifier | Adds secondary color to input |
| file-input-accent | Modifier | Adds accent color to input |
| file-input-info | Modifier | Adds info color to input |
| file-input-success | Modifier | Adds success color to input |
| file-input-warning | Modifier | Adds warning color to input |
| file-input-error | Modifier | Adds error color to input |
| file-input-lg | Responsive | Large size for input |
| file-input-md | Responsive | Medium (default) size for input |
| file-input-sm | Responsive | Small size for input |
| file-input-xs | Responsive | Extra small size for input |