FileInput

A basic widget for getting the attachment file.

'use client';

import { FileInput } from 'rizzui/file-input';

Default

The default style of FileInput.

Upload File

'use client';

import { FileInput } from 'rizzui/file-input';

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

'use client';

import { FileInput } from 'rizzui/file-input';

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

'use client';

import { FileInput } from 'rizzui/file-input';

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

With Clearable Button

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

'use client';

import React from 'react';
import { FileInput } from 'rizzui/file-input';

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

'use client';

import { FileInput } from 'rizzui/file-input';

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

Disabled

The disabled state of the FileInput component.

Upload File

'use client';

import { FileInput } from 'rizzui/file-input';

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!

'use client';

import { FileInput } from 'rizzui/file-input';

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!

'use client';

import { FileInput } from 'rizzui/file-input';

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"
placeholder	string	Set input placeholder text	__
disabled	boolean	Whether the input is disabled or not	__
clearable	boolean	Add clearable option	__
onClear	FileinputOnclear	Callback function called when the clear button is clicked	__
helperText	ReactNode	Add helper text. Can be a 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';

Fileinput onClear

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