# TextBox

The `TextBox` control is an editable text field where a user can input text.

## Reference <a href="#reference" id="reference"></a>

[TextBox](http://reference.avaloniaui.net/api/Avalonia.Controls/TextBox/)

## Source code <a href="#source-code" id="source-code"></a>

[TextBox.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/TextBox.cs)

## Examples <a href="#examples" id="examples"></a>

### Basic one line TextBox <a href="#basic-one-line-textbox" id="basic-one-line-textbox"></a>

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox />
    </StackPanel>
</Window>
```

produces the following output in **Windows 10**

![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-02958d8e0b49dc3c4506af315c22f8f2c6f759e2%2Ftextbox_basic.png?alt=media)

### Password input TextBox <a href="#password-input-textbox" id="password-input-textbox"></a>

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox PasswordChar="#" />
    </StackPanel>
</Window>
```

produces the following output in **Windows 10** when text is input

![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-bef6764a34fd6f9ea9fd335bc508382672d50181%2Ftextbox_password.png?alt=media)

### TextBox with watermark <a href="#textbox-with-watermark" id="textbox-with-watermark"></a>

Avalonia can show a "watermark" in a `TextBox`, which is a piece of text that is displayed when the `TextBox` is empty (in HTML5 this is called a *placeholder*)

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <StackPanel Margin="10">
        <TextBox Watermark="Street address" />
    </StackPanel>
</Window>
```

produces the following output in **Windows 10**

![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-6a590567de7de0d933a1503772db4db2af45d825%2Ftextbox_watermark.png?alt=media)

### Multiline TextBox <a href="#multiline-textbox" id="multiline-textbox"></a>

```markup
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaAppTemplate.MainWindow"
        Title="AvaloniaAppTemplate">
    <Grid Margin="10">
        <TextBox AcceptsReturn="True" TextWrapping="Wrap" />
    </Grid>
</Window>
```

produces the following output in **Windows 10** when text is input

![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-7259b0b8b54002ad3c93392f3c57ac90d2358518%2Ftextbox_multiline.png?alt=media)

### TextInput Event Handling <a href="#textinput-event-handling" id="textinput-event-handling"></a>

By default the [TextInput](http://reference.avaloniaui.net/api/Avalonia.Input/InputElement/37F81F6F) event does nothing if you assign directly to it. This is due to the TextBox itself handling the event from the underlying InputElement.

If you wish to access the TextInput event, then you will have to use the TextBox.AddHandler method to intercept the event via event tunneling.

```csharp
MyTextInput.AddHandler(TextInputEvent, MyTextInput_InputHandler, RoutingStrategies.Tunnel);
```

To see more details about this behavior, read [routed events](https://avaloniachina.gitbook.io/avalonia/docs/input/routed-events) documentation page.