Blazorise MemoInput component

MemoInput collect data from the user and allow multiple lines of text.

MemoInput is an input field component for multi-line text input based on a <textarea> element.

Examples

Basic

<MemoInput Rows="5" />

Tab override

By default a <textarea> will lose focus when you press the tab key. If you want to allow tabs to be entered you just need to enable it with ReplaceTab, and optionally a TabSize parameter. 
<MemoInput Rows="5" ReplaceTab TabSize="4" />

Auto size

Unless set to a fixed height, MemoInput adjusts its height automatically based on its content. The default and minimum height is two rows of text. 
<MemoInput Value="@loremipsum" AutoSize />

@code {
    string loremipsum = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel semper libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Proin volutpat, sapien ut facilisis ultricies, eros purus blandit velit, at ultrices mi libero quis ante. Curabitur scelerisque metus et libero convallis consequat. Pellentesque feugiat pulvinar nisl sed pellentesque.";
}

Binding

Two-way binding

By using bind-* attribute the text will be automatically assigned to the member variable. 
<MemoInput @bind-Value="@description" />

@code{
    string description;
}

Mannual event binding

When using the event ValueChanged, you also must define the Value value attribute. 
<MemoInput Value="@description" ValueChanged="@OnDescriptionChanged" />

@code{
    string description;

    Task OnDescriptionChanged( string value )
    {
        description = value;

        return Task.CompletedTask;
    }
}

Settings

Text Changed mode

By default the ValueChanged event will be raised on every keypress. To override default behavior of ValueChanged event and to disable the change on every keypress you must set the Immediate to false on application start. After setting it to false the event will be raised only after the input loses focus. 
public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.Immediate = false;
    } );
}

Text Delay mode

Because of some limitations in Blazor, sometimes there can be problems when Immediate is enabled. Basically if you try to type too fast into the text field the caret can jump randomly from current selection to the end of the text. To prevent that behaviour you need to enable Debounce. Once enabled it will slightly delay every value entered into the field to allow the Blazor engine to do it's thing. By default this option is disabled. 
public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.Debounce = true;
      options.DebounceInterval = 300;
    } );
}

Best Practices

Guide Longer Input

Use a visible label and persistent help text when users need guidance about the expected content or format. Choose a useful initial height or enable auto sizing, but set practical limits so a long value does not take over the page.

Frequent Updates

Delayed text updates are preferable when typing triggers search, preview, or autosave work. Communicate save progress and failures instead of implying that every keystroke is already persisted. Override the Tab key only in editing experiences where inserting tabs is expected; otherwise preserve normal keyboard navigation.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page