FileInput
FileInput is a component used for users to select files.
Please upload file
<FileInput placeholder="Please upload file" />
Usage
import { FileInput } from "@yamada-ui/react"
import { FileInput } from "@/components/ui"
import { FileInput } from "@workspaces/ui"
<FileInput />
Change Variant
Outline
Filled
Flushed
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant, index) => (
<FileInput
key={index}
variant={variant}
placeholder={toTitleCase(variant)}
/>
)}
</For>
</VStack>
Change Size
Xs
Sm
Md
Lg
Xl
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<FileInput key={index} size={size} placeholder={toTitleCase(size)} />
)}
</For>
</VStack>
Change Color Scheme
Success
Warning
<VStack>
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<FileInput
key={index}
colorScheme={colorScheme}
placeholder={toTitleCase(colorScheme)}
/>
)}
</For>
</VStack>
Allow Multiple Selection
To allow multiple selection, set multiple to true.
multiple
<FileInput placeholder="multiple" multiple />
Specify File Extensions
To specify file extensions, set accept to a string(type).
only png, jpeg
<FileInput accept="image/png,image/jpeg" placeholder="only png, jpeg" />
Customize Separator
To customize the separator, set separator to a string.
Please upload file
<FileInput placeholder="Please upload file" multiple separator=";" />
Use Custom Component
To use a custom component, set component to a ReactNode. component provides value(File) and index.
Please upload file
<FileInput
component={({ value: { name } }) => <Tag>{name}</Tag>}
gapY="xs"
multiple
placeholder="Please upload file"
/>
Format File Names
To format file names, use format. format provides File.
Please upload file
<FileInput
format={({ name }) => name.substring(0, name.indexOf("."))}
multiple
placeholder="Please upload file"
/>
Customize Children
To customize children, use children. children provides File as an array.
<FileInput multiple>
{(files) => <Text>Selected: {files?.length ?? 0}</Text>}
</FileInput>
Add Addon
To add an addon, wrap FileInput with InputGroup.Root and use InputGroup.Addon.
Please upload file
<InputGroup.Root>
<InputGroup.Addon>
<FileIcon />
</InputGroup.Addon>
<FileInput placeholder="Please upload file" />
</InputGroup.Root>
Add Element
To add an element, wrap FileInput with InputGroup.Root and use InputGroup.Element.
Please upload file
<InputGroup.Root>
<InputGroup.Element>
<FileIcon />
</InputGroup.Element>
<FileInput placeholder="Please upload file" />
</InputGroup.Root>
Disable
To disable, set disabled to true.
Please upload file
Please upload file
Please upload file
<VStack>
<FileInput placeholder="Please upload file" disabled />
<InputGroup.Root disabled>
<InputGroup.Addon>
<FileIcon />
</InputGroup.Addon>
<FileInput placeholder="Please upload file" />
</InputGroup.Root>
<Field.Root disabled label="Upload file">
<FileInput placeholder="Please upload file" />
</Field.Root>
</VStack>
Read-Only
To make it read-only, set readOnly to true.
Please upload file
Please upload file
Please upload file
<VStack>
<FileInput placeholder="Please upload file" readOnly />
<InputGroup.Root readOnly>
<InputGroup.Addon>
<FileIcon />
</InputGroup.Addon>
<FileInput placeholder="Please upload file" />
</InputGroup.Root>
<Field.Root readOnly label="Upload file">
<FileInput placeholder="Please upload file" />
</Field.Root>
</VStack>
Invalid
To make the input invalid, set invalid to true.
Please upload file
Please upload file
Please upload file
<VStack>
<FileInput placeholder="Please upload file" invalid />
<InputGroup.Root invalid>
<InputGroup.Addon>
<FileIcon />
</InputGroup.Addon>
<FileInput placeholder="Please upload file" />
</InputGroup.Root>
<Field.Root errorMessage="File is required." invalid label="Upload file">
<FileInput placeholder="Please upload file" />
</Field.Root>
</VStack>
Change Border Color
To change the border color, set a color to focusBorderColor or errorBorderColor.
Custom focus border color
Custom focus border color
Custom error border color
Custom error border color
<VStack>
<FileInput
focusBorderColor="success"
placeholder="Custom focus border color"
/>
<InputGroup.Root variant="flushed" focusBorderColor="success">
<InputGroup.Element>
<FileIcon />
</InputGroup.Element>
<FileInput placeholder="Custom focus border color" />
</InputGroup.Root>
<FileInput
errorBorderColor="warning"
invalid
placeholder="Custom error border color"
/>
<InputGroup.Root errorBorderColor="warning" invalid>
<InputGroup.Addon>
<FileIcon />
</InputGroup.Addon>
<FileInput placeholder="Custom error border color" />
</InputGroup.Root>
</VStack>
Reset
To reset the value, set resetRef to ref. A callback function will be attached to the set ref, execute it.
files: 0
placeholder
const [value, onChange] = useState<File[] | undefined>(undefined)
const resetRef = useRef<() => void>(null)
const onReset = () => {
onChange(undefined)
resetRef.current?.()
}
return (
<VStack>
<Text>files: {value?.length ?? 0}</Text>
<InputGroup.Root>
<FileInput
multiple
placeholder="placeholder"
resetRef={resetRef}
value={value}
onChange={onChange}
/>
{value?.length ? (
<InputGroup.Element clickable onClick={onReset}>
<Center as="button" focusVisibleRing="outside" p="0.5" rounded="xs">
<XIcon fontSize="xl" />
</Center>
</InputGroup.Element>
) : null}
</InputGroup.Root>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Props
Accessibility
Currently, this section is being updated due to the migration of v2.