`<TextArrayInput>`

<TextArrayInput> lets you edit an array of strings, like a list of email addresses or a list of tags. It renders as an input where the current values are represented as chips. Users can add or delete new values.

Usage

Use <TextArrayInput> to edit an array of strings:

import { Create, SimpleForm, TextArrayInput, TextInput } from 'react-admin';
export const EmailCreate = () => (
 <Create>
 <SimpleForm>
 <TextArrayInput source="to" />
 <TextInput source="subject" />
 <TextInput source="body" multiline minRows={5} />
 </SimpleForm>
 </Create>
);

This form will allow users to input multiple email addresses in the to field. The resulting email will look like this:

{
 "to": ["jane.smith@example.com", "john.doe@acme.com"],
 "subject": "Request for a quote",
 "body": "Hi,\n\nI would like to know if you can provide a quote for the following items:\n\n- 100 units of product A\n- 50 units of product B\n- 25 units of product C\n\nBest regards,\n\nJulie\n",
 "id": 123,
 "date": "2024年11月26日T11:37:22.564Z",
 "from": "julie.green@example.com",
}

<TextArrayInput> is designed for simple string arrays. For more complex use cases, consider the following alternatives:

<SelectArrayInput> or <AutocompleteArrayInput> if the possible values are limited to a predefined list.
<ReferenceArrayInput> if the possible values are stored in another resource.
<ArrayInput> if the stored value is an array of objects instead of an array of strings.

Props

Prop	Required	Type	Default	Description
`options`	Optional	`string[]`	Optional list of possible values for the input. If provided, the input will suggest these values as the user types.
`renderTags`	Optional	`(value, getTagProps) => ReactNode`	A function to render selected value.

<TextArrayInput> also accepts the common input props.

Additional props are passed down to the underlying Material UI <Autocomplete> component.

`options`

You can make show a list of suggestions to the user by setting the options prop:

<TextArrayInput
 source="to"
 options={[
 'john.doe@example.com',
 'jane.smith@example.com',
 'alice.jones@example.com',
 'bob.brown@example.com',
 'charlie.davis@example.com',
 'david.evans@example.com',
 'emily.frank@example.com',
 'frank.green@example.com',
 'grace.harris@example.com',
 'henry.ivan@example.com',
 ]}
/>

`renderTags`

To customize the rendering of the chips, use the renderTags prop. This prop is a function that takes two arguments:

value: The input value (an array of strings)
getTagProps: A props getter for an individual tag.

<TextArrayInput
 source="to"
 renderTags={(value: readonly string[], getTagProps) =>
 value.map((option: string, index: number) => {
 const { key, ...tagProps } = getTagProps({ index });
 return (
 <Chip
 variant="outlined"
 label={option}
 key={key}
 {...tagProps}
 />
 );
 })
 }
/>