---
sidebar_position: 14
---

import { FileInput } from "rizzui";
import Paper from "@site/src/components/paper";
import FileInputClearable from "@site/src/components/file-input";

# FileInput

A basic widget for getting the attachment file.

```tsx
import { FileInput } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **FileInput**.

<Paper className="block">
  <FileInput label="Upload File" />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return <FileInput label="Upload File" />;
}
```

<div className="mb-16" />

## Variants

You can change the style of **FileInput** using [**variant**](#fileinput-variants) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 gap-6">
  <FileInput
    label="Outline Variant"
    variant="outline"
  />
  <FileInput
    label="Flat Variant"
    variant="flat"
  />
  <FileInput
    label="Text Variant"
    variant="text"
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <>
      <FileInput
        label="Outline Variant"
        variant="outline"
      />
      <FileInput
        label="Flat Variant"
        variant="flat"
      />
      <FileInput
        label="Text Variant"
        variant="text"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of **FileInput** using [**size**](#fileinput-sizes) property.

<Paper className="justify-start items-start gap-6">
  <FileInput
    label="Small FileInput"
    size="sm"
  />
  <FileInput label="Default FileInput" />
  <FileInput
    label="Large FileInput"
    size="lg"
  />
  <FileInput
    label="Extra Large FileInput"
    size="xl"
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <>
      <FileInput
        label="Small FileInput"
        size="sm"
      />
      <FileInput label="Default FileInput" />
      <FileInput
        label="Large FileInput"
        size="lg"
      />
      <FileInput
        label="Extra Large FileInput"
        size="xl"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **FileInput** using [**rounded**](#fileinput-rounded) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <FileInput
    label="Rounded Small"
    rounded="sm"
  />
  <FileInput label="Rounded Default" />
  <FileInput
    label="Rounded Large"
    rounded="lg"
  />
  <FileInput
    label="Rounded None"
    rounded="none"
  />
  <FileInput
    label="Rounded Full"
    rounded="pill"
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <>
      <FileInput
        label="Rounded Small"
        rounded="sm"
      />
      <FileInput label="Rounded Default" />
      <FileInput
        label="Rounded Large"
        rounded="lg"
      />
      <FileInput
        label="Rounded None"
        rounded="none"
      />
      <FileInput
        label="Rounded Full"
        rounded="pill"
      />
    </>
  );
}
```

<div className="mb-16" />

## With Clearable Button

You can clear value of the **FileInput** using **clearable** & **onClear** property.

<Paper className="block">
  <FileInputClearable />
</Paper>

```tsx
import React from "react";
import { FileInput } from "rizzui";

export default function App() {
  const [state, setState] = React.useState<any>("");

  return (
    <FileInput
      value={state}
      onChange={(e) => setState(e.target.value)}
      clearable={!!state}
      onClear={() => {
        setState("");
      }}
    />
  );
}
```

<div className="mb-16" />

## With Multiple Files

By enabling **multiple** property true, user can upload multiple files.

<Paper className="block">
  <FileInput
    label="Upload Multiple Files"
    multiple
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <FileInput
      label="Upload Multiple Files"
      multiple
    />
  );
}
```

<div className="mb-16" />

## Disabled

The disabled state of the **FileInput** component.

<Paper className="block">
  <FileInput
    label="Upload File"
    disabled
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <FileInput
      label="Upload File"
      disabled
    />
  );
}
```

<div className="mb-16" />

## With Helper Text

You can add helper text to the **FileInput** component using **helperText** property.

<Paper className="block">
  <FileInput
    label="Upload Files"
    helperText="This is helper text!"
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <FileInput
      label="Upload Files"
      helperText="This is helper text!"
    />
  );
}
```

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="block">
  <FileInput
    label="Upload Files"
    error="This is error message!"
  />
</Paper>

```tsx
import { FileInput } from "rizzui";

export default function App() {
  return (
    <FileInput
      label="Upload Files"
      error="This is error message!"
    />
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### FileInput Props

Here is the API documentation of the Input component. And the rest of the props are the same as the original html input field.

<div className="overflow-x-auto">

|      Props      |                   Type                   |                                 Description                                 |   Default   |
| :-------------: | :--------------------------------------: | :-------------------------------------------------------------------------: | :---------: |
|      label      |               `ReactNode`                |                               Set field label                               |    \_\_     |
|   labelWeight   |       [LabelWeight](#label-weight)       |                            Set label font weight                            | `"medium"`  |
|     variant     | [FileinputVariants](#fileinput-variants) |                     The variants of the component are:                      | `"outline"` |
|      size       |    [FileinputSizes](#fileinput-sizes)    | The size of the component. `"sm"` is equivalent to the dense input styling. |   `"md"`    |
|     rounded     |  [FileinputRounded](#fileinput-rounded)  |                          The rounded variants are:                          |   `"md"`    |
|   placeholder   |                 `string`                 |                         Set input placeholder text                          |    \_\_     |
|    disabled     |                `boolean`                 |                    Whether the input is disabled or not                     |    \_\_     |
|    clearable    |                `boolean`                 |                            add clearable option                             |    \_\_     |
|     onClear     |  [FileinputOnclear](#fileinput-onclear)  |                                 clear event                                 |    \_\_     |
|   helperText    |               `ReactNode`                |          Add helper text. It could be string or a React component           |    \_\_     |
|      error      |                 `string`                 |                     Show error message using this prop                      |    \_\_     |
| labelClassName  |                 `string`                 |                     Override default CSS style of label                     |    \_\_     |
| inputClassName  |                 `string`                 |                     Override default CSS style of input                     |    \_\_     |
| helperClassName |                 `string`                 |                  Override default CSS style of helperText                   |    \_\_     |
| errorClassName  |                 `string`                 |                 Override default CSS style of error message                 |    \_\_     |
|    className    |                 `string`                 |               Add custom classes to the root of the component               |    \_\_     |
|       ref       |         `Ref<HTMLInputElement>`          |                                                                             |    \_\_     |
|       ...       |          `InputHTMLAttributes`           |   native props like **value**, **onChange**, **onFocus**, **onBlur** ...    |    \_\_     |

</div>

<div className="mb-10" />

### Fileinput Variants

```ts
type FileinputVariants = "outline" | "flat" | "text";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Fileinput Sizes

```ts
type FileinputSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Fileinput Rounded

```ts
type FileinputRounded = "sm" | "md" | "lg" | "none" | "pill";
```

<div className="mb-10" />

### Fileinput onClear

```ts
type FileinputOnclear = (event: MouseEvent<Element, MouseEvent>) => void;
```
