FileInput

FileInputは、ユーザーがファイルを選択するために使用されるコンポーネントです。

Please upload file

<FileInput placeholder="Please upload file" />

使い方

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

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

import { FileInput } from "@workspaces/ui"

<FileInput />

バリアントを変更する

Outline

Filled

Flushed

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <FileInput
        key={index}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

サイズを変更する

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <FileInput key={index} size={size} placeholder={toTitleCase(size)} />
    )}
  </For>
</VStack>

カラースキームを変更する

Success

Warning

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <FileInput
        key={index}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>

複数選択を許容する

複数選択を許容する場合は、multipleをtrueに設定します。

multiple

<FileInput placeholder="multiple" multiple />

拡張子を指定する

拡張子を指定する場合は、acceptに文字列(タイプ)を設定します。

only png, jpeg

<FileInput accept="image/png,image/jpeg" placeholder="only png, jpeg" />

区切りをカスタマイズする

区切りをカスタマイズする場合は、separatorに文字列を設定します。

Please upload file

<FileInput placeholder="Please upload file" multiple separator=";" />

カスタムコンポーネントを使う

カスタムコンポーネントを使う場合は、componentにReactNodeを設定します。componentは、value(File)とindexを提供します。

Please upload file

<FileInput
  component={({ value: { name } }) => <Tag>{name}</Tag>}
  gapY="xs"
  multiple
  placeholder="Please upload file"
/>

ファイル名を整形する

ファイル名を整形する場合は、formatを使用します。formatは、Fileを提供します。

Please upload file

<FileInput
  format={({ name }) => name.substring(0, name.indexOf("."))}
  multiple
  placeholder="Please upload file"
/>

子要素をカスタマイズする

子要素をカスタマイズする場合は、childrenを使用します。childrenは、Fileを配列で提供します。

<FileInput multiple>
  {(files) => <Text>Selected: {files?.length ?? 0}</Text>}
</FileInput>

アドオンを追加する

アドオンを追加する場合は、FileInputをInputGroup.Rootでラッピングし、InputGroup.Addonを使用します。

Please upload file

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

要素を追加する

要素を追加する場合は、FileInputをInputGroup.Rootでラッピングし、InputGroup.Elementを使用します。

Please upload file

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

無効にする

無効にする場合は、disabledをtrueに設定します。

Please upload file

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>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

Please upload file

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をtrueに設定します。

Please upload file

Upload file

Please upload file

File is required.

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

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたは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>

リセットする

値をリセットする場合は、resetRefにrefを設定します。設定されたrefにコールバック関数が付与されるので、それを実行します。

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`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.

アクセシビリティ

Field.Rootを使用しない場合は、FileInputにaria-labelまたはaria-labelledbyを設定します。

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

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

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

キー	説明	状態
`Tab`	要素をフォーカスします。	-
`Space`, `Enter`	フォーカスしている要素をアクティブにします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`FileInput`	`role="button"`	ボタンであることを示します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-labelledby`	`FileInput`が`Field.Root`内にあり、`Field.Root`に`label`が設定されている場合は、その`id`を設定します。
	`aria-describedby`	`FileInput`が`Field.Root`内にあり、`Field.Root`に`errorMessage`、`helperMessage`、`Field.ErrorMessage`、または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`input`	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-describedby`	`FileInput`が`Field.Root`内にあり、`Field.Root`に`errorMessage`、`helperMessage`、`Field.ErrorMessage`、または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。

類似のコンポーネント

Textareaは、複数行のテキスト入力を取得するために使用されるコンポーネントです。

PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。

PasswordInputは、表示・非表示の切り替えができるパスワード入力用のコンポーネントです。

NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Editableは、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。

Dropzoneは、ファイルをドラッグアンドドロップでアップロードするために使用されるコンポーネントです。

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

使用しているコンポーネント・フック

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

使用されているコンポーネント・フック

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。