FileInput

FileInput is a React component designed to create customizable input fields with various options such as placeholder, type, color, label, and more. It supports different variants like outlined, filled, and standard, along with size and color customization.

Example Preview

FileInput Example

Usage

import { FileInput } from "@/@core";
 
// Use FileInput in your component
<FileInput
  className="custom-style primary-color lg"
  label="Upload a file"
  helperText="Please choose a file to upload"
  disabled={false}
  error={false}
  size="md"
  color="ghost"
  // Additional HTML attributes can be passed as well
  onChange={(e) => console.log(e.target.files)}
/>;

Props

Prop name	Type	Default value	Required	Description
`className`	string	-	No	Additional CSS classes for styling.
`label`	string	-	No	Label for the input field.
`helperText`	string	-	No	Helper text displayed below the input field.
`disabled`	boolean	`false`	No	Disables the input field.
`defaultValue`	string	-	No	Default value for the input field.
`value`	string	-	No	Controlled value for the input field.
`error`	boolean	`false`	No	Indicates whether there's an error with the input.
`size`	`xs`, `sm`, `md`, `lg`	`md`	No	Size of the input field.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`, `ghost`	`primary`	No	Color of the input field.
`props`	HTMLAttributes<HTMLInputElement>	-	No	Additional HTML attributes can be passed as well.

Additionally, it accepts all HTML input attributes (HTMLAttributes<HTMLInputElement>).

Styling

The component allows for extensive styling customization through the use of various classes based on the specified options. These classes can be passed through the className prop.

For example, to style the input field with a specific color and size, you can pass additional classes:

<FileInput
  className="custom-style primary-color lg"
  // other props...
/>

In the above example, the input field will have the styles defined by the 'custom-style', 'primary-color', and 'lg' classes. Refer to the source code for a detailed list of available classes.

ℹ️

Note: The InputField component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our InputField component is dynamic and easy to use. It is also fully customizable.

Checkbox Radio