---
name: FileInputField
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import FileInputField from './FileInputField'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# FileInputField

The file input field is an AccessibileField wrapper around the `FileInput` component. It includes a label, a tooltip, and some accessibility features.

### Try it out

export const code = `<FileInputField
  name="file-input"
  label="Upload a new files"
  tooltip="Upload some files"
  accept={['.txt', '.doc']}
  labels={{ delete: 'delete file', loading: 'loading', loaded: 'successful' }}
  prompt="Drag files here or"
  buttonText="Select Files..."
  multiple={true}
/>`

<LiveProvider code={code} scope={{ FileInputField }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Basic usage

The `FileInputField` component works very similarly to the `FileInput` component, but the field will handle labels, tooltips, and accessibility for you.
For example, `FileInputField` will associate your label and tooltip with the file input to assist users who rely on screen-reader technology.
For more information, see the docs for `AccessibleField` and `FileInput`.

## Properties

<PropsTable of={FileInputField} />