Deposit Form Components

This page documents the available form components for customizing record deposit forms. For field metadata and the useFieldData hook, see Deposit form. For search result components, see Search result components.

Basic Components

TextField

Standard text input component from oarepo-ui with automatic field metadata integration:

import { TextField } from "@js/oarepo_ui/forms";
 
<TextField fieldPath="metadata.title" />

Automatically applies field metadata from your model YAML, XSS protection, and Formik integration.

Source: oarepo-ui/forms/components/TextField 

Based on: react-invenio-forms.TextField

Props:

StringArrayField

Array of text inputs with add/remove functionality:

import { StringArrayField } from "@js/oarepo_ui/forms";
 
<StringArrayField
  fieldPath="metadata.keywords"
  addButtonLabel="Add keyword"
/>

Source: oarepo-ui/forms/components/StringArrayField 

Based on: react-invenio-forms.ArrayField

Props:

Date Fields

Extended Date/Time Format (EDTF) compliant date pickers:

import {
  EDTFSingleDatePickerField,
  EDTFDateRangePickerField,
} from "@js/oarepo_ui/forms";
 
// Single date
<EDTFSingleDatePickerField fieldPath="metadata.publication_date" />
 
// Date range with single/range toggle
<EDTFDateRangePickerField fieldPath="metadata.date_range" />

Source: oarepo-ui/forms/components/EDTFDatePickerField 

Based on: Formik useField, react-datepicker

EDTFSingleDatePickerField

Props:

EDTFDateRangePickerField

Props:

I18n Fields

I18nTextInputField

Internationalized text field with language selector:

import { I18nTextInputField } from "@js/oarepo_ui/forms";
 
<I18nTextInputField
  fieldPath="metadata.title"
  usedLanguages={["en", "cs"]}
  lngFieldWidth={3}
/>

Source: oarepo-ui/forms/components/I18nTextInputField 

Based on: react-invenio-forms.GroupField, react-invenio-forms.TextField, oarepo-ui.LanguageSelectField

Props:

I18nRichInputField

Internationalized rich text editor:

import { I18nRichInputField } from "@js/oarepo_ui/forms";
 
<I18nRichInputField
  fieldPath="metadata.description"
  editorConfig={{ minHeight: 150 }}
/>

Source: oarepo-ui/forms/components/I18nRichInputField 

Based on: react-invenio-forms.RichInputField, react-invenio-forms.GroupField, oarepo-ui.OarepoRichEditor

Props:

MultilingualTextInput

Wrapper for multiple language entries with automatic language management:

import { MultilingualTextInput } from "@js/oarepo_ui/forms";
 
<MultilingualTextInput
  fieldPath="metadata.titles"
  rich={false}
  addButtonLabel="Add another language"
  showEmptyValue={true}
/>

Source: oarepo-ui/forms/components/MultilingualTextInput 

Based on: react-invenio-forms.ArrayField, oarepo-ui.I18nTextInputField, oarepo-ui.I18nRichInputField

Props:

LanguageSelectField

Language selection dropdown with search and filtering:

import { LanguageSelectField } from "@js/oarepo_ui/forms";
 
<LanguageSelectField
  fieldPath="metadata.language"
  usedLanguages={["en"]}
/>

Source: oarepo-ui/forms/components/LanguageSelectField 

Based on: react-invenio-forms.SelectField

Props:

Person/Contributor Fields

CreatibutorsField

Array field for creators/contributors with drag-and-drop reordering and modal editor:

import { CreatibutorsField } from "@js/oarepo_ui/forms";
 
<CreatibutorsField
  fieldPath="metadata.creators"
  schema="creators"
  showRoleField={true}
/>

Source: oarepo-ui/forms/components/CreatibutorsField 

Based on: react-invenio-forms.FieldArray, react-dnd

Props:

Role options are typically loaded from form config at vocabularies.contributor-types.

IdentifiersField

Array of identifier type-value pairs with validation:

import {
  IdentifiersField,
  personIdentifiersSchema,
  objectIdentifiersSchema,
  organizationIdentifiersSchema,
} from "@js/oarepo_ui/forms";
 
<IdentifiersField
  fieldPath="metadata.identifiers"
  options={personIdentifiersSchema}
/>

Source: oarepo-ui/forms/components/IdentifiersField 

Based on: react-invenio-forms.ArrayField, react-invenio-forms.SelectField, react-invenio-forms.TextField

Props:

Predefined option schemas:

• personIdentifiersSchema - ORCID, ScopusID, ResearcherID, ISNI, etc.
• organizationIdentifiersSchema - ISNI, ROR, ICO, DOI
• objectIdentifiersSchema - DOI, Handle, ISBN, ISSN, RIV

File Upload Components

InvenioRDM provides two file upload UI options:

Note: The nrp-model-copier template uses UppyUploader by default in FormFieldsContainer.jsx. To use the standard uploader used by InvenioRDM, import FileUploader instead.

CSP Configuration: When using Uppy, add to your application configuration (invenio.cfg):

APP_DEFAULT_SECURE_HEADERS = {
  # ...
    "script-src": ["'self'", "blob:", "'wasm-unsafe-eval'"],
  # ...
}

FileUploader (InvenioRDM default)

Simple, robust file picker and drag-and-drop UI with file list and progress indicators:

import { FileUploader } from "@js/invenio_rdm_records";
 
<FileUploader
  config={formConfig}
  files={files}
  isDraftRecord={!record.is_published}
  hasParentRecord={record?.versions?.index > 1}
  quota={formConfig.quota}
  permissions={permissions}
  record={record}
  uploadFiles={handleUpload}
  deleteFile={handleDelete}
  importParentFiles={handleImport}
  decimalSizeDisplay={formConfig.decimal_size_display}
  filesLocked={filesLocked}
  allowEmptyFiles={formConfig.allow_empty_files}
  fileModification={fileModification}
/>

Source: invenio-rdm-records/fields/FileUploader 

Props:

Features:

• Drag-and-drop or file picker
• File list with size and delete option
• Progress indicators for uploads
• Import files from previous version
• Warning for duplicate/empty files
• Quota enforcement (max files, max storage)

UppyUploader (Experimental)

Modern UI with folder upload, chunked upload, media preview, extensible plugins:

import { UppyUploader } from "@js/invenio_rdm_records";
 
<UppyUploader
  isDraftRecord={!record.is_published}
  config={formConfig}
  quota={formConfig.quota}
  decimalSizeDisplay={formConfig.decimal_size_display}
  allowEmptyFiles={formConfig.allow_empty_files}
  fileUploadConcurrency={formConfig.file_upload_concurrency}
  showMetadataOnlyToggle={false}
  filesLocked={filesLocked}
/>

Source: invenio-rdm-records/fields/UppyUploader 

Documentation: File Uploads - Uploader 

Based on: Uppy.js library

Props:

Features:

• Drag-and-drop or picker for files/folders
• Folder upload (entire directories at once)
• Chunked/multipart upload for large files
• Automatic retry on upload failure
• Per-part checksum validation
• Image previews and basic editing (crop, rotate, resize)
• Plugin system for extensions (validation, metadata, external sources)
• Mobile-responsive with keyboard navigation and screen-reader support |

AccessRightField

Record access and file permissions configuration:

import { AccessRightField } from "@js/oarepo_ui/forms";
 
<AccessRightField
  fieldPath="access"
  label="Access rights"
  labelIcon="unlock"
  record={record}
  recordRestrictionGracePeriod={180}
  allowRecordRestriction={true}
/>

Source: oarepo-ui/forms/components/AccessRightField 

Based on: invenio-rdm-records.AccessRightFieldCmp

Props:

ArrayFieldItem

Helper component for rendering array items with remove button:

import { ArrayFieldItem } from "@js/oarepo_ui/forms";
 
<ArrayFieldItem
  indexPath={index}
  arrayHelpers={arrayHelpers}
  fieldPathPrefix={`${fieldPath}.${index}`}
>
  {/* Subfields */}
</ArrayFieldItem>

Source: oarepo-ui/forms/components/ArrayFieldItem 

Based on: react-invenio-forms.GroupField

Props:

Controlled Vocabulary Components

Components from oarepo-vocabularies for vocabulary term forms:

VocabularyField

Smart wrapper that automatically selects between local or API-loaded vocabulary selector based on form configuration:

import { VocabularyField } from "@js/oarepo_vocabularies_ui/form";
 
<VocabularyField
  fieldPath="props.resource_type"
  vocabularyName="resource_type"
/>

Source: oarepo-vocabularies/VocabularyField 

Based on: LocalVocabularySelectField or VocabularySelectField (auto-selected)

Props:

VocabularySelectField

API-loaded vocabulary selector for large vocabularies with pagination and remote search:

import { VocabularySelectField } from "@js/oarepo_vocabularies_ui/form";
 
<VocabularySelectField
  vocabularyName="languages"
  fieldPath="props.language"
  multiple={false}
  showLeafsOnly={false}
/>

Source: oarepo-vocabularies/VocabularySelectField 

Based on: react-invenio-forms.RemoteSelectField

Props:

LocalVocabularySelectField

Local vocabulary selector for small vocabularies loaded entirely at once:

import { LocalVocabularySelectField } from "@js/oarepo_vocabularies_ui/form";
 
<LocalVocabularySelectField
  vocabularyName="resource_type"
  fieldPath="props.resource_type"
  usedOptions={[]}
  showLeafsOnly={false}
/>

Source: oarepo-vocabularies/LocalVocabularySelectField 

Based on: react-invenio-forms.SelectField

Props:

VocabularyPickerField

Flexible picker field for displaying selected vocabulary values with custom selection UI:

import { VocabularyPickerField } from "@js/oarepo_vocabularies_ui/form";
 
<VocabularyPickerField
  fieldPath="props.subjects"
  multiple={true}
  label="Subjects"
  initialValue={[]}
>
  <YourVocabularySelector />
</VocabularyPickerField>

Source: oarepo-vocabularies/VocabularyPickerField 

Based on: Formik context, FieldValueProvider

Props:

VocabularyMultilingualInputField

Multilingual text input for vocabulary titles/names:

import { VocabularyMultilingualInputField } from "@js/oarepo_vocabularies_ui/form";
 
<VocabularyMultilingualInputField
  fieldPath="title"
  label="Title"
  required={true}
  textFieldLabel="Name"
/>

Source: oarepo-vocabularies/VocabularyMultilingualInputField 

Based on: react-invenio-forms.ArrayField, LanguageSelectField

Props:

PropFieldsComponent

Renders custom vocabulary field props as text inputs:

import { PropFieldsComponent } from "@js/oarepo_vocabularies_ui/form";
 
<PropFieldsComponent vocabularyProps={vocabularyProps} />

Source: oarepo-vocabularies/PropFieldsComponent 

Based on: react-invenio-forms.TextField

Props:

Base Components (from react-invenio-forms)

These components are used by oarepo-ui but imported directly from react-invenio-forms:

ArrayField

Dynamic array wrapper with add button:

import { ArrayField } from "react-invenio-forms";
 
<ArrayField
  fieldPath={fieldPath}
  addButtonLabel="Add item"
  defaultNewValue={{ name: "" }}
>
  {({ arrayHelpers, indexPath }) => (
    <div>...</div>
  )}
</ArrayField>

Source: react-invenio-forms 

GroupField

Form field grouping component:

import { GroupField } from "react-invenio-forms";
 
<GroupField fieldPath="metadata.name">
  <TextField fieldPath="metadata.name.given" />
  <TextField fieldPath="metadata.name.family" />
</GroupField>

Source: react-invenio-forms 

AccordionField

Collapsible section container:

import { AccordionField } from "react-invenio-forms";
import { i18next } from "@translations/i18next";
 
<AccordionField
  includesPaths={["metadata.title", "metadata.description"]}
  active
  label={i18next.t("Basic information")}
>
  <TextField fieldPath="metadata.title" />
  <TextField fieldPath="metadata.description" />
</AccordionField>

Source: react-invenio-forms 

Props:

RichInputField

Rich text editor wrapper:

import { RichInputField } from "react-invenio-forms";
 
<RichInputField
  fieldPath="metadata.description"
  label="Description"
  editor={<OarepoRichEditor />}
/>

Source: react-invenio-forms 

Note: This component requires explicit field metadata props (label, helpText) unlike oarepo-ui components.

Further Reading