Text component

Text

Use TextEdit to have a basic input.

<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 IsPlaintext="true" />

Disabled

A disabled input element is unusable and un-clickable.

<TextEdit IsDisabled="true" />

Readonly

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

<TextEdit IsReadonly="true" />

Sizing

Sets the heights of input elements.

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

Pattern

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

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

Roles

Use Role to define text value.

<TextEdit Role="TextRole.Email" />
<TextEdit Role="TextRole.Password" />

Usage

TextEdit by itself is not really usable if you can’t use it. To get or set the input value you have two options. You can use bind-* attribute or you can use a TextChanged event.

With bind attribute

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

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

@code{
    string name;
}

With event

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

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

@code{
    string name;

    void OnNameChanged( string value )
    {
        name = value;
    }
}

Settings

TextChanged mode

By default the TextChanged event will be raised only when component loses focus. To override default behaviour of TextChanged event you must set the ChangeTextOnKeyPress to true on application start.

public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.ChangeTextOnKeyPress = true;
    } );
}

Attributes

Name	Type	Default	Description
Role	TextRole	Text	The role of the input text.
Text	string		Input value.
TextChanged	event		Occurs after text has changed.
IsPlaintext	boolean	false	Remove the default form field styling and preserve the correct margin and padding.
IsReadonly	boolean	false	Prevents modification of the input’s value.
IsDisabled	boolean	false	Prevents user interactions and make it appear lighter.
MaxLength	int?	null	Specifies the maximum number of characters allowed in the input element.
Placeholder	string		Sets the placeholder for the empty text.
Pattern	string		Specifies a regular expression that the input element’s value is checked against on form validation.
Color	Colors	None	Component visual or contextual style variants.
Size	Sizes	None	Component size variations.