Textbox

in namespace DotVVM.Bootstrap5.Controls

Usage & Scenarios

Extends the built-in TextBox control to allow applying Bootstrap CSS classes.

https://getbootstrap.com/docs/5.2/forms/form-control/

Sample 1: TextBox Sizing

Use the Size property to set the size of the TextBox.

<bs:TextBox Size="Small" Text="{value: Text}" />

<bs:TextBox Size="Default" Text="{value: Text}" />

<bs:TextBox Size="Large" Text="{value: Text}" />
namespace DotvvmWeb.Views.Docs.Controls.bootstrap5.TextBox.sample1
{
    public class ViewModel
    {
        public string Text { get; set; } = "DotVVM";
    }
}

Sample 2: TextBox Type

Use the Type property to set the type of the TextBox.

<bs:TextBox Type="Normal" Text="Normal textbox"/>

<bs:TextBox Type="Password" Text="Password"/>

<bs:TextBox Type="Multiline" Text="Multiline textbox"/>

<bs:TextBox Type="Color" Text="Color textbox"/>

<bs:TextBox Type="Date" Text="Date textbox"/>

Sample 3: TextBox Update Text on Input

Use UpdateTextOnInput to set wheter viewmodel property will be updated. Set True to update immediately or set False to update on focus loose.

<bs:TextBox  Text="{value: Text}"  UpdateTextOnInput="true" />

<bs:TextBox  Text="{value: Text}"  UpdateTextOnInput="false" />

<p>{{value: Text}}</p>
namespace DotvvmWeb.Views.Docs.Controls.bootstrap5.TextBox.sample1
{
    public class ViewModel
    {
        public string Text { get; set; } = "DotVVM";
    }
}

HTML produced by the control