# File

> The native file input with a styled selector button.

Page: https://pico.rusticstack.com/docs/forms/file

`input[type="file"]` has no border or background. The "Choose file" button is styled like a secondary button, and the file name uses the muted text color.

**Example: File**

```html
<label>
  File browser
  <input type="file" name="file" />
</label>
```

## Multiple files and accept

**Example: Multiple images**

```html
<label>
  Photos
  <input type="file" name="photos" accept="image/*" multiple />
</label>
```

## States

Hover, active and focus on the input give the selector button the secondary hover colors. Focus also adds a secondary colored ring around the button.

## Customization

The button is the `::file-selector-button` pseudo-element. Its horizontal padding is `--pico-form-element-spacing-horizontal` and its vertical padding is half of `--pico-form-element-spacing-vertical`. The file name text uses `--pico-color`, which is set to the muted color on this input.