Input

An input frame with a focus ring and a placeholder, as Avalonia's TextBox.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PlaceholderText="Enter your name..." />
  <TextBox Text="Hello world" />
</StackPanel>

#Usage

The theme covers TextBox (MaskedTextBox shares it): the frame with the input background and a 1px input border that turns to ring, with the ring band, while the field or anything in it has focus; the muted PlaceholderText; no hover look. The selection shows only while the field is focused.

InnerLeftContent and InnerRightContent are the prefix and suffix, a size's gap from the text; for addons inside one bordered frame see Input Group. A password is masked with PasswordChar="•", and Classes="revealPasswordButton" adds a mask toggle, an eye button that shows the text while checked. Classes="clearButton" adds a clear button while the text is not empty and can be edited; a click clears the text and focuses the field. After the text come the mask toggle, the clear button and the InnerRightContent, in that order. A disabled field fills with the disabled background and draws its text, placeholder and inner content at half strength; a read-only field has no look of its own.

A right click opens the menu with Cut, Copy, Paste and Select All and their shortcuts. Cut needs a selection in an editable field, Copy a selection, Paste an editable field; a masked password cannot be cut or copied. The labels are the resources UIKit.Strings.Cut, UIKit.Strings.Copy, UIKit.Strings.Paste and UIKit.Strings.SelectAll; replace them to translate the menu, or set your own ContextFlyout.

#Validation and masks

The uikit:Inputs attached properties add rules to a single-line TextBox; nothing changes until one is set.

An edit (typing, pasting, an IME commit, cutting or deleting) is rejected when the text it would leave fails Validate, the mask or Pattern, and the text before it passed. An empty text always passes, and a text set by the app that does not pass can still be edited. Clearing with Escape, like the other edits, can be undone.

A string MaskPattern is a pattern mask: 9 takes a digit, A a letter, # a letter or a digit, * any character, and any other character is a separator the mask writes itself. (999)999-9999 turns 1234567890 into (123)456-7890, and the empty field shows (___)___-____ unless it has its own placeholder. A uikit:NumberMask takes a number: an optional sign, digits and one point, with full-width digits and signs typed as ASCII. With a Separator the digits are grouped by three while typing, and Fraction limits the digits after the point. Text the app sets is masked too. Inputs.UnmaskValue(textBox) returns the text without the separators.

#Examples

The four sizes.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Classes="xsmall" PlaceholderText="Extra small" />
  <TextBox Classes="small" PlaceholderText="Small" />
  <TextBox PlaceholderText="Medium" />
  <TextBox Classes="large" PlaceholderText="Large" />
</StackPanel>

A small search icon as InnerLeftContent, and an xsmall ghost icon button as InnerRightContent.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PlaceholderText="Search">
    <TextBox.InnerLeftContent>
      <PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Search}" />
    </TextBox.InnerLeftContent>
  </TextBox>
  <TextBox Text="Hello world">
    <TextBox.InnerRightContent>
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
      </Button>
    </TextBox.InnerRightContent>
  </TextBox>
</StackPanel>

A masked password, with and without the reveal button.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PasswordChar="•" Text="password123" />
  <TextBox Classes="revealPasswordButton" PasswordChar="•" Text="password123" />
</StackPanel>

The clear button, alone and after the reveal button.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Classes="clearButton" Text="Hello world" PlaceholderText="Type something" />
  <TextBox Classes="revealPasswordButton clearButton" PasswordChar="•" Text="password123" />
</StackPanel>

Read-only and disabled fields.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Text="Read only" IsReadOnly="True" />
  <TextBox Text="Disabled" IsEnabled="False" />
  <TextBox PlaceholderText="Disabled placeholder" IsEnabled="False" />
</StackPanel>

A phone number, a pattern of letters and digits, and an amount grouped by thousands with two decimals.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Width="240" uikit:Inputs.MaskPattern="(999)999-9999" />
  <TextBox Width="240" uikit:Inputs.MaskPattern="AAA-###-AAA" />
  <TextBox Width="240" PlaceholderText="Amount">
    <uikit:Inputs.MaskPattern>
      <uikit:NumberMask Separator="," Fraction="2" />
    </uikit:Inputs.MaskPattern>
  </TextBox>
</StackPanel>

A field that takes letters and digits only, and one that Escape clears.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Width="240" uikit:Inputs.Pattern="^[a-zA-Z0-9]*$" PlaceholderText="Letters and digits only" />
  <TextBox Width="240" uikit:Inputs.CleanOnEscape="True" Text="Press Escape to clear" />
</StackPanel>