# FileInput
The FileInput component is a customizable wrapper for file selection, providing a more flexible and consistent way to handle file uploads in forms.
## About
The `FileInput` component styles the native file input and reads its settings from the Form or Fieldset around it, so it matches the other fields. Size, shape and classes are all props.
## Example
Put the `FileInput` inside a form or a fieldset and it picks up their settings. Here's a basic example:
```html
Upload
```
The `name` prop is mandatory for the FileInput component. It ensures the input field is properly recognized when submitting a form. Without a name, the uploaded file data will not be sent. The content inside the `FileInput` component will be display as a label.
## Selected Files
The `files` prop holds the selected files as a `FileList`. It is bindable, so use `bind:files` to read what the user picked, for example to show the file names or upload them yourself. Add the native `multiple` attribute to allow more than one file, and `accept` to limit the file types.
```html
Upload
{#if files?.length}
{#each Array.from(files) as file}
{file.name}
{/each}
{/if}
```
## Size
The `size` prop sets the padding and the height of the field, on the same scale as the other form components. Available sizes: `"sm"`, `"md"` (default), `"lg"` and `"xl"`.
By default, the `FileInput` inherits the `size` from the nearest Fieldset or Form component. However, you can override it manually if needed.
```html
UploadUploadUploadUpload
```
## Variant
The `variant` prop controls the visual style of the FileInput, allowing you to adjust its appearance based on form design preferences. Available values: `"bordered"` (default) and `"flat"`.
If the `FileInput` is inside a **Fieldset** or **Form** , it inherits the `variant` automatically unless explicitly set.
```html
UploadUpload
```
## Rounded
The `rounded` prop defines the border-radius of the FileInput, giving it different levels of rounded corners. Available values: `"sm"`, `"md"` (default), `"lg"`, `"xl"`, `"2xl"`, `"full"`, `"none"`. It applies to the input and its file button.
By default the `FileInput` takes its `rounded` value from the **Fieldset** or **Form** around it.
```html
UploadUploadUploadUploadUploadUpload
```
## Helper Text
The `helperText` prop allows you to add additional guidance or information below the file input field. This can be useful for providing instructions, specifying accepted file formats, or any other relevant details for the user. You can pass either a **string** or a **Snippet** as the helper text.
```html
Upload
```
Or using a Snippet for more flexibility:
```html
Upload
{#snippet helperText()}
Accepted formats: PDF, DOCX. Max size: 5MB.
{/snippet}
```
## Customization
The `FileInput` component provides several ways to customize its appearance to match your design requirements. The `size`, `variant`, `rounded` and `reset` props are inherited from the nearest **Fieldset** or **Form**. You can modify the container, label, and input field styles using the following props:
- `labelClasses` - Custom styles for the label of the FileInput. If used within a Fieldset or Form component, it inherits their `labelClasses`.
- `wrapperClasses` - Additional classes for the wrapper , useful for layout adjustments.
- `class` - Apply custom styles to the file input itself.
```html
Upload
```
## Accessibility
Uploading files should be simple - and accessible. Our File component pairs each file input with a clear, connected `