`<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.

Usage

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.

<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.

import { TextInput } from 'react-admin';

<TextInput source="title" resettable />

`type`

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

<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.

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.

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.

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

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.