Skip to main content

Input Components

New React-Admin inputs to be used in SemApps projects.


npm install @semapps/input-components --save



To be used instead of React-Admin ImageInput because this component expects an object while uploads handled through SemApps return only an URL.


A multi-lines TextInput, which returns an array with each line as an element. Can be used with MultiUrlField.


Same as React-Admin AutocompleteInput but displays the name of the data server where the resource is coming from.

import { ReferenceInput } from 'react-admin';
import { MultiServerAutocompleteInput } from '@semapps/input-components';

export const TopicInput = props => (
<ReferenceInput reference="Topic" fullWidth>
<MultiServerAutocompleteInput optionText="label" resettable />


Same as React-Admin AutocompleteArrayInput but displays the name of the data server (in grey and italic).

import { ReferenceArrayInput } from 'react-admin';
import { MultiServerAutocompleteArrayInput } from '@semapps/input-components';

export const TopicsInput = props => (
<ReferenceArrayInput reference="Topic" {...props}>
<MultiServerAutocompleteArrayInput optionText="label" />

To prevent the name of the server to be displayed inside the chip, you can add this to your Material-UI theme:

overrides: {
RaAutocompleteArrayInput: {
chipContainerFilled: {
'& .serverName': {
display: 'none'


Same as React-Admin ReferenceArrayInput but, if there is a single value, transform the string into an array. Also, if the value is dereferenced, only keep it's @id.


Same as React-Admin ReferenceInput but, if the value is dereferenced, only keep it's @id.