Blazorise TextEdit component

The TextEdit allows the user to input and edit text.

<TextEdit> fields components are used for collecting user provided information.

Examples

Basic

<TextEdit />

Placeholder

<TextEdit Placeholder="Some text value..." />

Static text

Static text removes the background, border, shadow, and horizontal padding, while maintaining the vertical spacing so you can easily align the input in any context, like a horizontal form.

<TextEdit Plaintext />

Disabled

A disabled input element is unusable and un-clickable.

<TextEdit Disabled />

ReadOnly

If you use the read-only attribute, the input text will look similar to a normal one, but is not editable.

<TextEdit ReadOnly />

Sizing

Sets the heights of input elements.

<Field>
    <TextEdit Size="Size.Small" />
</Field>
<Field>
    <TextEdit Size="Size.Large" />
</Field>

Pattern

Use pattern attribute to specify regular expression that will be used while validating the input text value.

Pattern does not match!

<Validation UsePattern>
    <TextEdit Pattern="[A-Za-z]{3}">
        <Feedback>
            <ValidationError>Pattern does not match!</ValidationError>
        </Feedback>
    </TextEdit>
</Validation>

EditMask

Edit masks are used to prevent user from entering an invalid values and when entered string must match a specific format. For example you can limit input to only accept numeric string, date string or if you want full control you can use RegEx format.

Text only

Numbers only

<Fields>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <FieldLabel>
            Text only
        </FieldLabel>
        <FieldBody>
            <TextEdit MaskType="MaskType.RegEx" EditMask="^[a-zA-Z ]*$" />
        </FieldBody>
    </Field>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <FieldLabel>
            Numbers only
        </FieldLabel>
        <FieldBody>
            <TextEdit MaskType="MaskType.RegEx" EditMask="^(\d+(.\d{0,2})?|.?\d{1,2})$" />
        </FieldBody>
    </Field>
</Fields>

Roles

Use Role to define type of text value.

Password

<Fields>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <FieldLabel>
            Email
        </FieldLabel>
        <FieldBody>
            <TextEdit Role="TextRole.Email" />
        </FieldBody>
    </Field>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <FieldLabel>
            Password
        </FieldLabel>
        <FieldBody>
            <TextEdit Role="TextRole.Password" autocomplete="new-password" />
        </FieldBody>
    </Field>
</Fields>

Binding

Two-way binding

By using bind-* attribute the text will be automatically assigned to the member variable.

<TextEdit @bind-Text="@name" />

@code{
    string name;
}

Manual event binding

When using the event TextChanged, you also must define the Text value attribute.

<TextEdit Text="@name" TextChanged="@OnNameChanged" />

@code{
    string name;

    Task OnNameChanged( string value )
    {
        name = value;

        return Task.CompletedTask;
    }
}

Settings

Text Changed mode

By default the TextChanged event will be raised on every keypress. To override default behavior of TextChanged 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;
    } );
}

Note: All of the options above can also be defined on each TextEdit individually. Defining them on TextEdit will override any global settings.

Best Practices

Prevent autocomplete

When working with email and password fields, in some cases browsers might automatically autofill them with the values from user system. To prevent it you can define an autocomplete attribute, eg. autocomplete="new-password" on an input field.