GitHub

Input

PreviousNext

GPUI Kit's input frame, focus ring and placeholder, as Avalonia's TextBox.

Partial
InteractiveInput demo
<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. GPUI shows a selection only while focused, so an unfocused field hides it.

InnerLeftContent and InnerRightContent are GPUI's 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="•" (GPUI's mask character), and Classes="revealPasswordButton" adds GPUI's mask toggle, an eye button that shows the text while checked. 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.

ClassEffect
xsmall, small, largeHeight 20, 24 and 44; medium, the default, is 32
revealPasswordButtonThe eye button that reveals a masked password

Examples

The four sizes.

Sizes
InteractiveInput demo: 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.

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

A masked password, with and without the reveal button.

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

Read-only and disabled fields.

States
InteractiveInput demo: States
<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>

Not covered

  • GPUI Kit's validation and mask syntax (use MaskedTextBox or your own validation).
  • Clearing with Esc.
  • Inline tokens.