FileInput

FileInput is a component used for users to select files.

Upload file

<FileInput placeholder="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

<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.

Upload files

<FileInput placeholder="Upload files" multiple />

Specify File Extensions

To specify file extensions, set accept to a string(type).

Upload a PNG or JPEG file

<FileInput
  accept="image/png,image/jpeg"
  placeholder="Upload a PNG or JPEG file"
/>

Customize Separator

To customize the separator, set separator to a string.

Upload files

<FileInput placeholder="Upload files" multiple separator=";" />

Use Custom Component

To use a custom component, set component to a ReactNode. component provides value(File) and index.

Upload files

<FileInput
  component={({ value: { name } }) => <Tag>{name}</Tag>}
  gapY="xs"
  multiple
  placeholder="Upload files"
/>

Format File Names

To format file names, use format. format provides File.

Upload files

<FileInput
  format={({ name }) => name.substring(0, name.indexOf("."))}
  multiple
  placeholder="Upload files"
/>

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.

Upload file

<InputGroup.Root>
  <InputGroup.Addon>
    <FileIcon />
  </InputGroup.Addon>
  <FileInput placeholder="Upload file" />
</InputGroup.Root>

Add Element

To add an element, wrap FileInput with InputGroup.Root and use InputGroup.Element.

Upload file

<InputGroup.Root>
  <InputGroup.Element>
    <FileIcon />
  </InputGroup.Element>
  <FileInput placeholder="Upload file" />
</InputGroup.Root>

Disable

To disable, set disabled to true.

Upload file

<VStack>
  <FileInput placeholder="Upload file" disabled />

  <InputGroup.Root disabled>
    <InputGroup.Addon>
      <FileIcon />
    </InputGroup.Addon>
    <FileInput placeholder="Upload file" />
  </InputGroup.Root>

  <Field.Root disabled label="Upload file">
    <FileInput placeholder="Upload file" />
  </Field.Root>
</VStack>

Read-Only

To make it read-only, set readOnly to true.

Upload file

<VStack>
  <FileInput placeholder="Upload file" readOnly />

  <InputGroup.Root readOnly>
    <InputGroup.Addon>
      <FileIcon />
    </InputGroup.Addon>
    <FileInput placeholder="Upload file" />
  </InputGroup.Root>

  <Field.Root readOnly label="Upload file">
    <FileInput placeholder="Upload file" />
  </Field.Root>
</VStack>

Invalid

To make the input invalid, set invalid to true.

Upload file

File is required.

<VStack>
  <FileInput placeholder="Upload file" invalid />

  <InputGroup.Root invalid>
    <InputGroup.Addon>
      <FileIcon />
    </InputGroup.Addon>
    <FileInput placeholder="Upload file" />
  </InputGroup.Root>

  <Field.Root errorMessage="File is required." invalid label="Upload file">
    <FileInput placeholder="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 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

Upload files

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="Upload files"
        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

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`children`	-	`(files: File[] \| undefined) => ReactNode` A callback that returns a React node.
`component`	-	`(props: { index: number; value: File }) => ReactNode` The component that displays uploaded files.
`defaultValue`	-	`File[]` The initial value of the file input.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`format`	-	`(value: File, index: number) => string` A callback that formats the name of the uploaded file.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`onChange`	-	`(files: File[] \| undefined) => void` Function to be called when a file change event occurs.
`resetRef`	-	`RefObject<(() => void) \| null>` Ref to a reset function.
`separator`	`","`	`string` The string to separate uploaded files.
`value`	-	`File[]` The value of the file input.

Accessibility

If you are not using Field.Root, set aria-label or aria-labelledby to FileInput.

<FileInput aria-label="Upload file" placeholder="Upload file" />

<VStack gap="sm">
  <Text as="h3" id="label">
    Upload file
  </Text>

  <FileInput aria-labelledby="label" placeholder="Upload file" />
</VStack>

Key	Description	State
`Tab`	Focuses the element.	-
`Space`, `Enter`	Activates the focused element.	-

ARIA Roles and Attributes

Element	Roles and Attributes	Usage
`div.ui-file-input__root`	`role="button"`	Indicates that this is a button.
	`aria-disabled`	Sets to `"true"` if `disabled` or `readOnly` is set.
	`aria-labelledby`	If `FileInput` is within a `Field.Root` with a `label` and no placeholder, value, or explicit accessible name is provided, sets the label's `id`.
	`aria-describedby`	If `FileInput` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, `Field.ErrorMessage`, or `Field.HelperMessage`, sets its `id`.
	`aria-invalid`	Sets to `"true"` if `invalid` is set.
	`aria-required`	Sets to `"true"` if `required` is set.
`input`	`aria-disabled`	Sets to `"true"` if `disabled` or `readOnly` is set.
	`aria-describedby`	If `FileInput` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, `Field.ErrorMessage`, or `Field.HelperMessage`, sets its `id`.
	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-invalid`	Sets to `"true"` if `invalid` is set.
	`aria-required`	Sets to `"true"` if `required` is set.

Similar Components

Dropzone is a component used for uploading files via drag and drop.

Editable is a component used to obtain inline editable text input.

Input is a component used to obtain text input from the user.

NumberInput is a component used to obtain numeric input from the user.

PasswordInput is a component that allows users to input passwords with a visibility toggle.

PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.

Textarea is a component used to obtain multi-line text input.

FileButton is a button component used for users to select files.

Uses Components & Hooks

Input is a component used to obtain text input from the user.

Field is a component used to group form elements with label, helper message, error message, etc.

Portal is a component that renders elements outside of the current DOM hierarchy.

Used By Components & Hooks

FileButton is a button component used for users to select files.