@payfit/unity-components
Version:
49 lines (48 loc) • 2.1 kB
TypeScript
import { FileUploadTriggerProps } from '../../../../core/components/file-upload-trigger/FileUploadTrigger.js';
export interface FileUploadTriggerInputProps extends Omit<FileUploadTriggerProps, 'id' | 'name' | 'onSelect'> {
/** Disables the visible picker action. */
isDisabled?: boolean;
}
/**
* Keeps file selections in the same TanStack Form state as the rest of a
* workflow.
*
* FileUploadTriggerInput uses the current `AppField` for its native input
* name, visible label relationship, guidance, and feedback. It replaces the
* field's `File[]` value after each selection and marks the field touched.
* @param props - Native picker options and the pressable picker action.
* @param props.children - The Button or Actionable that opens the file picker.
* @param props.isDisabled - Disables the picker action and native input.
* @see {@link FileUploadTriggerInputProps} for all supported props.
* @example
* ```tsx
* import { Button } from '@payfit/unity-components'
* import { useTanstackUnityForm } from '@payfit/unity-components/forms'
*
* export function SupportingDocumentsForm() {
* const form = useTanstackUnityForm({
* defaultValues: { documents: [] as File[] },
* })
*
* return (
* <form.AppForm>
* <form.Form>
* <form.AppField name="documents">
* {field => (
* <field.FileUploadTriggerInput allowsMultiple>
* <Button variant="primary">Choose documents</Button>
* </field.FileUploadTriggerInput>
* )}
* </form.AppField>
* </form.Form>
* </form.AppForm>
* )
* }
* ```
* @remarks
* - Render FileUploadTriggerInput inside `form.AppField`.
* - Do not pass `id` or `name`; the component derives both from the current field.
* - Use `field.FileUploadTriggerField` when the picker needs its own label, helper text, and validation feedback.
*/
declare const FileUploadTriggerInput: import('react').ForwardRefExoticComponent<FileUploadTriggerInputProps & import('react').RefAttributes<HTMLInputElement>>;
export { FileUploadTriggerInput };