`<TextInput>`

<TextInput> is the most common input. It is used for texts, emails, URL or passwords. In translates into a Material UI <TextField>, and renders as <input type="text"> in HTML.

<video controls autoplay playsinline muted loop> <source src="./img/text-input.webm" type="video/webm"/> <source src="./img/text-input.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>

Usage

jsx

import { Edit, SimpleForm, TextInput, required } from 'react-admin';

export const PostEdit = () => (
    <Edit title={<PostTitle />}>
        <SimpleForm>
            <TextInput source="title" validate={[required()]} />
            <TextInput source="teaser" validate={[required()]} defaultValue="Lorem Ipsum" multiline />
        </SimpleForm>
    </Edit>
);

Props

Prop	Required	Type	Default	Description
`multiline`	Optional	`boolean`	`false`	If `true`, the input height expands as the text wraps over several lines
`resettable`	Optional	`boolean`	`false`	If `true`, display a button to reset the changes in this input value
`type`	Optional	`string`	`text`	Type attribute passed to the `<input>` element

<TextInput> also accepts the common input props.

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

`multiline`

You can make the <TextInput> expandable using the multiline prop for multiline text values. It renders as an auto expandable textarea.

jsx

<TextInput multiline source="body" />

`resettable`

You can make the <TextInput> component resettable using the resettable prop. This will add a reset button which will be displayed only when the field has a value and is focused.

jsx

import { TextInput } from 'react-admin';

<TextInput source="title" resettable />

<video controls autoplay playsinline muted loop> <source src="./img/resettable-text-input.webm" type="video/webm"/> <source src="./img/resettable-text-input.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>

`type`

You can choose a specific input type using the type attribute, for instance text (the default), email, url, or password:

jsx

<TextInput label="Email Address" source="email" type="email" />

Warning: Do not use type="number", or you'll receive a string as value (this is a known React bug). Instead, use <NumberInput>.

Rich Text

If you want to let users edit rich text, use <RichTextInput> instead. This component leverages TipTap to provide a WYSIWYG editor.

<video controls autoplay playsinline muted loop> <source src="./img/rich-text-input.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>

jsx

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { RichTextInput } from 'ra-input-rich-text';

export const PostEdit = () => (
	<Edit>
		<SimpleForm>
			<TextInput source="title" />
			<RichTextInput source="body" />
		</SimpleForm>
	</Edit>
);

See the <RichTextInput> documentation for more details.

Edit In Place

Instead of using a <TextInput> in a form, you can use an <InPlaceEditor> to edit the value directly in the list or the show view. This is useful for quick edits without having to open a form.

<video controls autoplay playsinline muted loop> <source src="./img/InPlaceEditor.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>

{% raw %}

tsx

import { Show, InPlaceEditor } from 'react-admin';
import { Stack, Box, Typography } from '@mui/material';

const CustomerShow = () => (
    <Show>
        <Stack direction="row" spacing={2}>
            <AvatarField />
            <CustomerActions />
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                <Typography>Phone</Typography>
                <InPlaceEditor source="phone" />
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                <Typography>Email</Typography>
                <InPlaceEditor source="email" />
            </Box>
            ...
        </Stack>
    </Show>
);

{% endraw %}

Check out the <InPlaceEditor> documentation for more details.

Predictive Text Input

An alternative to <TextInput> is <PredictiveTextInput>, which suggests completion for the input value, using your favorite AI backend. Users can accept the completion by pressing the Tab key. It's like Intellisense or Copilot for your forms.

<video controls autoplay playsinline muted loop> <source src="./img/PredictiveTextInput.mp4" type="video/mp4"/> Your browser does not support the video tag. </video>

Use <PredictiveTextInput> instead of <TextInput> in your forms:

jsx

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { PredictiveTextInput } from '@react-admin/ra-ai';

const PersonEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="firstName" />
            <TextInput source="lastName" />
            <TextInput source="company" />
            <PredictiveTextInput source="email" />
            <PredictiveTextInput source="website" />
            <PredictiveTextInput source="bio" multiline />
        </SimpleForm>
    </Edit>
);

See the dedicated documentation for more details.

The TextInput Component

<TextInput>