import CodeRender from '../../CodeRender'

### File input

<CodeRender code={`<input type="file" class="file-input w-full max-w-xs" />`} />

```html
<input type="file" class="file-input w-full max-w-xs" />
```

### File input with border

<CodeRender code={`<input type="file" class="file-input file-input-bordered w-full max-w-xs" />`} />

```html
<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
```

### Ghost (no background)

<CodeRender code={`<input type="file" class="file-input file-input-ghost w-full max-w-xs" />`} />

```html
<input type="file" class="file-input file-input-ghost w-full max-w-xs" />
```

### With form-control and labels

<CodeRender
  code={`<label class="form-control w-full max-w-xs">
  <div class="label">
    <span class="label-text">Pick a file</span>
    <span class="label-text-alt">Alt label</span>
  </div>
  <input type="file" class="file-input file-input-bordered w-full max-w-xs" />
  <div class="label">
    <span class="label-text-alt">Alt label</span>
    <span class="label-text-alt">Alt label</span>
  </div>
</label>`}
/>

```html
<label class="form-control w-full max-w-xs">
  <div class="label">
    <span class="label-text">Pick a file</span>
    <span class="label-text-alt">Alt label</span>
  </div>
  <input type="file" class="file-input file-input-bordered w-full max-w-xs" />
  <div class="label">
    <span class="label-text-alt">Alt label</span>
    <span class="label-text-alt">Alt label</span>
  </div>
</label>
```

### Colors

<CodeRender
  className="gap-2"
  code={`
  <input type="file" class="file-input file-input-bordered file-input-primary w-full max-w-xs" />
  <input type="file" class="file-input file-input-bordered file-input-success w-full max-w-xs" />
  <input type="file" class="file-input file-input-bordered file-input-warning w-full max-w-xs" />
  <input type="file" class="file-input file-input-bordered file-input-error w-full max-w-xs" />
  <input type="file" class="file-input file-input-bordered file-input-neutral w-full max-w-xs" />
  `}
/>

```html
<input type="file" class="file-input file-input-bordered file-input-primary w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-success w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-warning w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-error w-full max-w-xs" />
<input type="file" class="file-input file-input-bordered file-input-neutral w-full max-w-xs" />¸
```

### Sizes

<CodeRender
className="gap-2"
  code={`
 
<!-- xs -->
<input type="file" class="file-input file-input-bordered file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" class="file-input file-input-bordered file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" class="file-input file-input-bordered file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" class="file-input file-input-bordered file-input-lg w-full max-w-xs" />
  `}
/>

```html
<!-- xs -->
<input type="file" class="file-input file-input-bordered file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" class="file-input file-input-bordered file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" class="file-input file-input-bordered file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" class="file-input file-input-bordered file-input-lg w-full max-w-xs" />
```

### Disabled

<CodeRender
  code={`
<input type="file" placeholder="You can't touch this" class="file-input file-input-bordered w-full max-w-xs" disabled />
  `}
/>

```html
<input type="file" placeholder="You can't touch this" class="file-input file-input-bordered w-full max-w-xs" disabled />
```
