FileInput is a special type of input to manage files. It allows you to select one or multiple files from your device and upload them to a server.
To start using the component make sure that you have imported it from Pol-ui:
import { FileInput } from "pol-ui";Default FileInput
FileInput
import { FileInput } from "pol-ui";
import React from "react";
const FileInputComponent = () => {
return <FileInput />;
};
export default FileInputComponent;Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| color | Colors | 'primary' | The color of the FileInput |
| helperText | ReactNode | - | The helper text of the FileInput |
| size | MainSizes | 'md' | The size of the FileInput |
| theme | FileInputTheme | The theme of the FileInput |
💡
You can also use any prop from the native input tag.
Examples
FileInput with a helper text
To render a Helper Text under the file input, you can use the helperText prop:
FileInput with a helper text
import { FileInput } from "pol-ui";
import React from "react";
const FileInputComponent = () => {
return <FileInput helperText="This file accepts only .pdf files" />;
};
export default FileInputComponent;All FileInput colors
As the FileInput component is a part of the Colors system, you can use any color with the color prop.
All FileInput colors
import { FileInput, Colors, ColorsEnum } from "pol-ui";
import React from "react";
const FileInputComponent = () => {
return(
<div className="flex flex-wrap items-center gap-3 ">
{Object.keys(ColorsEnum).map(color => (
<FileInput color={color as Colors} key={color} />
))}
</div>
)
};
export default FileInputComponent;Theme
The DynamicHeading doesn't have any styles by default, but you can use the className prop to customize the styles of the component.