FileInput

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 nameTypeDefaultDescription
colorColors'primary'The color of the FileInput
helperTextReactNode-The helper text of the FileInput
sizeMainSizes'md'The size of the FileInput
themeFileInputThemeThe 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.

Since February 17, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores