FileButton

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

<Wrap gap="md">
  <FileButton>Upload</FileButton>

  <FileButton
    as={IconButton}
    aria-label="Upload file"
    icon={<PlusIcon fontSize="2xl" />}
  />
</Wrap>

Usage

import { FileButton } from "@yamada-ui/react"

import { FileButton } from "@/components/ui"

import { FileButton } from "@workspaces/ui"

<FileButton />

Change Variant

<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
    {(variant, index) => (
      <FileButton variant={variant} key={index}>
        {toTitleCase(variant)}
      </FileButton>
    )}
  </For>
</Wrap>

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <FileButton size={size} key={index} minW="24">
        {toTitleCase(size)}
      </FileButton>
    )}
  </For>
</Wrap>

Change Color Scheme

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <FileButton colorScheme={colorScheme} key={index}>
        {toTitleCase(colorScheme)}
      </FileButton>
    )}
  </For>
</Wrap>

Allow Multiple Selection

To allow multiple selection, set multiple to true.

<FileButton multiple>Upload</FileButton>

Specify File Extensions

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

<FileButton accept="image/png,image/jpeg">Upload</FileButton>

Disable

To disable, set disabled to true.

Upload filePlease select a file to upload.

<VStack>
  <FileButton disabled alignSelf="flex-start">
    Upload
  </FileButton>

  <Field.Root
    disabled
    helperMessage="Please select a file to upload."
    label="Upload file"
  >
    <FileButton justifySelf="flex-start">Upload</FileButton>
  </Field.Root>
</VStack>

Read-Only

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

Upload filePlease select a file to upload.

<VStack>
  <FileButton readOnly alignSelf="flex-start">
    Upload
  </FileButton>

  <Field.Root
    readOnly
    helperMessage="Please select a file to upload."
    label="Upload file"
  >
    <FileButton justifySelf="flex-start">Upload</FileButton>
  </Field.Root>
</VStack>

Invalid

To make the input invalid, set invalid to true.

Upload filePlease select a file to upload.

<VStack>
  <FileButton invalid alignSelf="flex-start">
    Upload
  </FileButton>

  <Field.Root
    invalid
    helperMessage="Please select a file to upload."
    label="Upload file"
  >
    <FileButton justifySelf="flex-start">Upload</FileButton>
  </Field.Root>
</VStack>

To change the border color, set errorBorderColor to a color.

<FileButton invalid errorBorderColor="warning">
  Upload
</FileButton>

Reset

To reset the value, set resetRef to ref. A callback function will be attached to the set ref, execute it.

files: 0

const [files, onChange] = useState<File[] | undefined>(undefined)
const resetRef = useRef<() => void>(null)
const onReset = () => {
  onChange(undefined)
  resetRef.current?.()
}

return (
  <VStack>
    <Text>files: {files?.length ?? 0}</Text>

    <HStack>
      <FileButton multiple resetRef={resetRef} onChange={onChange}>
        Upload
      </FileButton>

      <Button onClick={onReset} variant="subtle">
        Reset
      </Button>
    </HStack>
  </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`	-	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"solid"`	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`defaultValue`	-	`File[]` The initial value of the file input.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`endIcon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to display at the end side of the button.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`iconProps`	-	`ButtonIconProps` The props of the icon element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`loadingIcon`	`"oval"`	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to display when the button is loading.
`loadingMessage`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The message to display when the button is loading.
`loadingPlacement`	`"start"`	`"end" \| "start"` The placement of the loading indicator. Accepts `start` or `end`.
`loadingProps`	-	`ButtonLoadingProps` The props of the loading icon element.
`onChange`	-	`(files: File[] \| undefined) => void` Function to be called when a file change event occurs.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`resetRef`	-	`RefObject<(() => void) \| null>` Ref to a reset function.
`startIcon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to display at the start side of the button.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.
`value`	-	`File[]` The value of the file input.

Accessibility

The FileButton follows the WAI-ARIA - Button Pattern for accessibility.

If you use only an icon for FileButton, set aria-label to FileButton.

<FileButton
  as={IconButton}
  aria-label="Upload file"
  icon={<PlusIcon fontSize="2xl" />}
/>

Key	Description	State
`Enter`, `Space`	Activates the focused button and opens the file dialog.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`FileButton`	`aria-labelledby`	If `FileButton` is within a `Field.Root` and `Field.Root` has a `label`, sets its `id`.
	`aria-disabled`	Sets to `"true"` if `disabled` or `readOnly` is set.