docs/TextArrayInput.md
<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.
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": ["[email protected]", "[email protected]"],
"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-26T11:37:22.564Z",
"from": "[email protected]",
}
<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.| 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.
optionsYou can make show a list of suggestions to the user by setting the options prop:
<TextArrayInput
source="to"
options={[
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
'[email protected]',
]}
/>
renderTagsTo 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}
/>
);
})
}
/>