TextBox Samples

Single Line TextBox (Default)

<TextBox Text="Hello World" CssClass="form-control" Width="Unit.Pixel(300)" />

Editable TextBox (ReadOnly=false)

<TextBox Text="You can edit this text" ReadOnly="false" CssClass="form-control" />

ReadOnly TextBox (ReadOnly=true)

<TextBox Text="Cannot edit this text" ReadOnly="true" CssClass="form-control" />

Password TextBox

<TextBox TextMode="TextBoxMode.Password" Placeholder="Enter password" />

Email TextBox

<TextBox TextMode="TextBoxMode.Email" Placeholder="Enter email" />

Number TextBox

<TextBox TextMode="TextBoxMode.Number" Placeholder="Enter number" />

MultiLine TextBox

<TextBox TextMode="TextBoxMode.MultiLine" Rows="5" Columns="40" Text="Line 1..." />

Enabled TextBox (Enabled=true - Default)

<TextBox Text="Enabled textbox" Enabled="true" />

Disabled TextBox (Enabled=false)

<TextBox Text="Disabled textbox" Enabled="false" />

MaxLength (10 characters max)

<TextBox MaxLength="10" Placeholder="Max 10 chars" />

Styled TextBox

<TextBox Text="Styled textbox"
         BackColor="WebColor.LightYellow"
         ForeColor="WebColor.Navy"
         BorderColor="WebColor.Blue"
         BorderWidth="Unit.Pixel(2)"
         BorderStyle="BorderStyle.Solid"
         Width="Unit.Pixel(250)" />

Date Picker

<TextBox TextMode="TextBoxMode.Date" />

URL Input

<TextBox TextMode="TextBoxMode.Url" Placeholder="Enter URL" />

Phone Input

<TextBox TextMode="TextBoxMode.Phone" Placeholder="Enter phone number" />

Search Input

<TextBox TextMode="TextBoxMode.Search" Placeholder="Search..." />

Color Picker

<TextBox TextMode="TextBoxMode.Color" />

With Placeholder Text

<TextBox Placeholder="Enter your name here" />

With Columns (Size)

<TextBox Columns="20" Placeholder="20 columns wide" />
An unhandled error has occurred. Reload 🗙