90 lines
2.4 KiB
Markdown
90 lines
2.4 KiB
Markdown
# daisyUI Documentation - File Input Component
|
|
|
|
File Input is a an input field for uploading files.
|
|
|
|
## Classes and Usage
|
|
|
|
### Core Classes:
|
|
- **file-input** - For <input type="file"> element
|
|
- **file-input-ghost** - ghost style
|
|
- **file-input-neutral** - neutral color
|
|
- **file-input-primary** - primary color
|
|
- **file-input-secondary** - secondary color
|
|
- **file-input-accent** - accent color
|
|
- **file-input-info** - info color
|
|
- **file-input-success** - success color
|
|
- **file-input-warning** - warning color
|
|
- **file-input-error** - error color
|
|
- **file-input-xs** - Extra small size
|
|
- **file-input-sm** - Small size
|
|
- **file-input-md** - Medium size [Default]
|
|
- **file-input-lg** - Large size
|
|
- **file-input-xl** - Extra large size
|
|
|
|
## Examples
|
|
|
|
### Basic File Input
|
|
|
|
```html
|
|
<input type="file" class="file-input" />
|
|
```
|
|
|
|
### File Input Ghost Style
|
|
|
|
```html
|
|
<input type="file" class="file-input file-input-ghost" />
|
|
```
|
|
|
|
### File Input with Fieldset and Label
|
|
|
|
```html
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">Pick a file</legend>
|
|
<input type="file" class="file-input" />
|
|
<label class="label">Max size 2MB</label>
|
|
</fieldset>
|
|
```
|
|
|
|
### File Input Sizes
|
|
|
|
```html
|
|
<input type="file" class="file-input file-input-xs" />
|
|
|
|
<input type="file" class="file-input file-input-sm" />
|
|
|
|
<input type="file" class="file-input file-input-md" />
|
|
|
|
<input type="file" class="file-input file-input-lg" />
|
|
|
|
<input type="file" class="file-input file-input-xl" />
|
|
```
|
|
|
|
### File Input Colors
|
|
|
|
```html
|
|
<input type="file" class="file-input file-input-primary" />
|
|
<input type="file" class="file-input file-input-secondary" />
|
|
<input type="file" class="file-input file-input-accent" />
|
|
<input type="file" class="file-input file-input-neutral" />
|
|
<input type="file" class="file-input file-input-info" />
|
|
<input type="file" class="file-input file-input-success" />
|
|
<input type="file" class="file-input file-input-warning" />
|
|
<input type="file" class="file-input file-input-error" />
|
|
```
|
|
|
|
### Disabled File Input
|
|
|
|
```html
|
|
<input type="file" placeholder="You can't touch this" class="file-input" disabled />
|
|
```
|
|
|
|
## Features
|
|
|
|
- Special styling for file input elements
|
|
- Multiple size options (xs, sm, md, lg, xl)
|
|
- Multiple color variants
|
|
- Ghost style option
|
|
- Works with fieldset and label components
|
|
- Disabled state support
|
|
|
|
This component is useful for creating styled file upload inputs that blend seamlessly with the rest of your daisyUI interface. |