@yamada-ui/file-input
Version:
Yamada UI file input component
62 lines (59 loc) • 1.9 kB
TypeScript
import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
import { FormControlOptions } from '@yamada-ui/form-control';
import { ReactNode, FC, ForwardedRef } from 'react';
interface FileInputOptions {
children?: (files: File[] | undefined) => ReactNode;
/**
* The component that displays uploaded files.
*/
component?: FC<{
index: number;
value: File;
}>;
/**
* The initial value of the file input.
*/
defaultValue?: File[];
/**
* The border color when the input is invalid.
*/
errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
/**
* The border color when the input is focused.
*/
focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
/**
* A callback that formats the name of the uploaded file.
*/
format?: (value: File, index: number) => string;
/**
* Ref to a reset function.
*/
resetRef?: ForwardedRef<() => void>;
/**
* The string to separate uploaded files.
*
* @default ','
*/
separator?: string;
/**
* The value of the file input.
*/
value?: File[];
/**
* Function to be called when a file change event occurs.
*/
onChange?: (files: File[] | undefined) => void;
}
interface InputProps extends Partial<Pick<HTMLInputElement, "accept" | "multiple">> {
}
interface FileInputProps extends Omit<HTMLUIProps, "children" | "defaultValue" | "onChange">, ThemeProps<"Input">, InputProps, FileInputOptions, FormControlOptions {
}
/**
* `FileInput` is a component used for users to select files.
*
* @see Docs https://yamada-ui.com/components/forms/file-input
*/
declare const FileInput: _yamada_ui_core.Component<"input", FileInputProps>;
export { FileInput, type FileInputProps };