diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx
index bd159c195b..794e2e0763 100644
--- a/src/components/forms/FileInput/FileInput.stories.tsx
+++ b/src/components/forms/FileInput/FileInput.stories.tsx
@@ -158,3 +158,15 @@ export const withRefAndCustomHandlers = (
>
)
}
+
+export const customText = (): React.ReactElement => (
+
+
+
+
+)
diff --git a/src/components/forms/FileInput/FileInput.test.tsx b/src/components/forms/FileInput/FileInput.test.tsx
index d882f364d9..c8f16bed28 100644
--- a/src/components/forms/FileInput/FileInput.test.tsx
+++ b/src/components/forms/FileInput/FileInput.test.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { FileInput, FileInputRef } from './FileInput'
@@ -91,6 +91,19 @@ describe('FileInput component', () => {
jest.restoreAllMocks()
})
+ it('displays custom text when given', () => {
+ const customProps = {...testProps, dragText: "Custom dragText", chooseText: "Custom chooseText"}
+ const { getByTestId } = render()
+
+ const dragText = within(getByTestId('file-input-instructions')).getByText(customProps.dragText)
+ expect(dragText).toBeInTheDocument()
+ expect(dragText).toHaveClass('usa-file-input__drag-text')
+
+ const chooseText = within(getByTestId('file-input-instructions')).getByText(customProps.chooseText)
+ expect(chooseText).toBeInTheDocument()
+ expect(chooseText).toHaveClass('usa-file-input__choose')
+ })
+
describe('when disabled', () => {
const disabledProps = { ...testProps, disabled: true }
it('the input element is disabled', () => {
diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx
index ad0bdbb8ab..478d38c5ce 100644
--- a/src/components/forms/FileInput/FileInput.tsx
+++ b/src/components/forms/FileInput/FileInput.tsx
@@ -13,6 +13,8 @@ import { makeSafeForID } from './utils'
type FileInputProps = {
id: string
name: string
+ dragText?: string
+ chooseText?: string
disabled?: boolean
multiple?: boolean
accept?: string
@@ -33,6 +35,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
{
name,
id,
+ dragText,
+ chooseText,
disabled,
multiple,
className,
@@ -82,7 +86,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
'has-invalid-file': showError,
})
- const dragText = multiple ? 'Drag files here or ' : 'Drag file here or '
+ const defaultDragText = multiple ? 'Drag files here or ' : 'Drag file here or '
+ const defaultChooseText = 'choose from folder'
const filePreviews = []
if (files) {
@@ -189,9 +194,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
className={instructionClasses}
aria-hidden="true">
{!hideDragText && (
- {dragText}
+ {dragText || defaultDragText}
)}
- choose from folder
+ {chooseText || defaultChooseText}
{filePreviews}