Memo is a multi-line text editor that supports different size modes. To specify the component's size in code, use the SizeMode property.

To apply different size modes, use the drop-down list in the demo card's header.

You can bind the editor's Text property to a field. If a user changes the input value, the editor updates its Text property. Use the BindValueMode property to specify when the update should happen. The following modes are available:

• OnLostFocus (default) — The editor value is updated after the editor loses focus.
• OnInput — The editor value is updated whenever a user types.
• OnDelayedInput — The editor value is updated with a delay after a user makes changes.

The DevExpress Blazor Memo component offers several options to manage its size and appearance within your application.

Initially the Memo displays two lines of text and can expand horizontally to fit the parent container's width. If content exceeds two lines, the editor displays a vertical scrollbar.

You can use the SizeMode property to specify a predefined size mode: Large, Medium, or Small. This property sets text and Clear button size.

To specify a custom size, use the following properties:

• Rows — Sets the number of initial visible text lines.
• MaxRows — Sets the maximum number of visible text lines.
• Columns — Sets editor width in characters.

This demo allows you to test/evaluate our Memo component's resize modes:

• Auto — The Memo component changes height automatically (based on content). Users cannot resize the component.
• Disabled — Users cannot resize the component.
• Horizontal — Users can resize the component horizontally.
• Vertical (Default) — Users can resize the component vertically.
• VerticalAndHorizontal — Users can resize the component both horizontally and vertically.

Additionally, you can limit Memo height using the MaxRows property. The property is applied when the ResizeMode property is set to Auto, Vertical, or VerticalAndHorizontal. This demo allows to evaluate the capabilities of the MaxRows property (for Auto/Vertical/VerticalAndHorizontal resize modes).

Set the ClearButtonDisplayMode property to Auto to display the Clear button in the editor when it is not empty. Use the NullText property to specify placeholder text that should be displayed when the editor is empty.

This demo adds our AI-powered Smart Autocomplete extension into the DevExpress Blazor Memo component. The extension helps users compose text more efficiently. As users type, the AI service analyzes input and context, and generates relevant text suggestions.

To try Autocomplete suggestions in this demo, place the caret at the end of existing text and start typing. You can interact with suggestions in the following ways:

• Press Tab to apply a suggestion.
• Press Esc or Backspace, continue typing, or click outside the editor to dismiss a suggestion.

Note: DevExpress AI-powered extensions follow the "bring your own key" principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered extensions in your application.

Follow the steps below to reproduce the capabilities of this demo in your Blazor project:

1. Register an AI service in your application.
2. Register the DevExpress.AIIntegration.Blazor.Editors namespace in the Components/Imports.razor file or in your Razor file.
3. Use the Extensions property to add the AI-powered Smart Autocomplete functionality to the Memo editor.