Input File
Ripple UI comes with a set of input file components that can be used to capture any types of files from the user.
Default
Simple example of Input File.
HTML
JSX
<input type="file" class="input-file" />
Colors
Input File colors
HTML
JSX
<input type="file" class="input-file input-file-primary" /><input type="file" class="input-file input-file-secondary" /><input type="file" class="input-file input-file-success" /><input type="file" class="input-file input-file-error" /><input type="file" class="input-file input-file-warning" />
Sizes
Input sizes
HTML
JSX
<input type="file" class="input-file input-file-xs" /><input type="file" class="input-file input-file-sm" /><input type="file" class="input-file input-file-md" /><input type="file" class="input-file input-file-lg" /><input type="file" class="input-file input-file-xl" />
Custom
You can customize the input file component by using the following structure.
HTML
JSX
<input type="file" class="input-file file:bg-pink-600 border-pink-500 file:text-white" />
API
| class | Description |
|---|---|
| input-file | Input File class |
| input-file-primary | Input File with primary color |
| input-file-secondary | Input File with secondary color |
| input-file-success | Input File with success color |
| input-file-error | Input File with error color |
| input-file-warning | Input File with warning color |
| input-file-xs | Input File with extra small size |
| input-file-sm | Input File with small size |
| input-file-md | Input File with medium size |
| input-file-lg | Input File with large size |
| input-file-xl | Input File with extra large size |