Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

FileInput

FileInput is a component used for users to select files.

Source@yamada-ui/file-input

Props

FileInputProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

component

Description

The component that displays uploaded files.

Type

FC<{ index: number; value: File }>

defaultValue

Description

The initial value of the file input.

Type

File[]

disabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

errorBorderColor

Description

The border color when the input is invalid.

Type

"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]

focusBorderColor

Description

The border color when the input is focused.

Type

"border" | BorderColor | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 320 more ... | [...]

format

Description

A callback that formats the name of the uploaded file.

Type

(value: File, index: number) => string

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

onChange

Description

Function to be called when a file change event occurs.

Type

(files: File[] | undefined) => void

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

resetRef

Description

Ref to a reset function.

Type

type ONLY_FOR_FORMAT = | ((instance: (() => void) | null) => void) | MutableRefObject<(() => void) | null>

separator

Description

The string to separate uploaded files.

Type

string

Default

','

size

Description

The size of the FileInput.

Type

"xs" | "sm" | "md" | "lg" | "xl"

Default

"md"

value

Description

The value of the file input.

Type

File[]

variant

Description

The variant of the FileInput.

Type

"filled" | "flushed" | "outline" | "unstyled"

Default

"outline"

Edit this page on GitHub

PreviousColorPickerNextFileButton