Skip to main content

FileInput

A basic widget for getting the attachment file.

import { FileInput } from "rizzui";

Default

The default style of FileInput.

import { FileInput } from "rizzui";

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

Variants

You can change the style of FileInput using variant property.

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.

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.

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.

import { FileInput } from "rizzui";

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

Disabled

The disabled state of the FileInput component.

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.

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.

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.

PropsTypeDescriptionDefault
labelReactNodeSet field label__
labelWeightLabelWeightSet label font weight"medium"
variantFileinputVariantsThe variants of the component are:"outline"
sizeFileinputSizesThe size of the component. "sm" is equivalent to the dense input styling."md"
roundedFileinputRoundedThe rounded variants are:"md"
placeholderstringSet input placeholder text__
disabledbooleanWhether the input is disabled or not__
clearablebooleanadd clearable option__
onClearFileinputOnclearclear event__
helperTextReactNodeAdd helper text. It could be string or a React component__
errorstringShow error message using this prop__
labelClassNamestringOverride default CSS style of label__
inputClassNamestringOverride default CSS style of input__
helperClassNamestringOverride default CSS style of helperText__
errorClassNamestringOverride default CSS style of error message__
classNamestringAdd custom classes to the root of the component__
refRef<HTMLInputElement>__
...InputHTMLAttributesnative 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;