FileInput

A basic widget for getting the attachment file.

import { FileInput } from "rizzui";

Default

The default style of FileInput.

Upload File

import { FileInput } from "rizzui";

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

Variants

You can change the style of FileInput using variant property.

Outline Variant

Flat Variant

Text Variant

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"
      />
    </>
  );
}

Sizes

You can change the size of FileInput using size property.

Small FileInput

Default FileInput

Large FileInput

Extra Large FileInput

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"
      />
    </>
  );
}

Rounded

You can change the border radius of FileInput using rounded property.

Rounded Small

Rounded Default

Rounded Large

Rounded None

Rounded Full

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"
      />
    </>
  );
}

With Clearable Button

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

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("");
      }}
    />
  );
}

With Multiple Files

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

Upload Multiple Files

import { FileInput } from "rizzui";

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

Disabled

The disabled state of the FileInput component.

Upload File

import { FileInput } from "rizzui";

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

With Helper Text

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

Upload Files

This is helper text!

import { FileInput } from "rizzui";

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

With Error Message

You can show the validation error message using error property.

Upload Files

This is error message!

import { FileInput } from "rizzui";

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

API Reference

---

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.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
variant	FileinputVariants	The variants of the component are:	"outline"
size	FileinputSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
rounded	FileinputRounded	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	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 ...	__

Fileinput Variants

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

Label Weight

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

Fileinput Sizes

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

Fileinput Rounded

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

Fileinput onClear

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