InputGroup

A text field and its addons in one frame, with rows above and below, as uikit:InputGroup.

<StackPanel Spacing="12" Width="280" HorizontalAlignment="Left">
  <uikit:InputGroup>
    <uikit:InputGroupAddon>https://</uikit:InputGroupAddon>
    <TextBox Text="example" />
    <uikit:InputGroupAddon Alignment="InlineEnd">.com</uikit:InputGroupAddon>
  </uikit:InputGroup>
  <uikit:InputGroup IsInvalid="True">
    <TextBox Text="not an email" />
    <uikit:InputGroupAddon Alignment="InlineEnd">
      <Button Classes="icon-only">
        <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
      </Button>
    </uikit:InputGroupAddon>
  </uikit:InputGroup>
  <uikit:InputGroup IsEnabled="False">
    <uikit:InputGroupAddon>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </uikit:InputGroupAddon>
    <TextBox PlaceholderText="Disabled" />
  </uikit:InputGroup>
</StackPanel>

#Usage

uikit:InputGroup frames a TextBox and its uikit:InputGroupAddons with the look of the Input Group, and also takes rows above and below the input. An addon's Alignment is InlineStart (before the input, the default), InlineEnd (after it), BlockStart (a row above it) or BlockEnd (a row below it). An addon lays out its items in a row 8px apart, in the muted medium-weight text; an item with HorizontalAlignment="Right" goes to the end of the row. Buttons in the addons get the group's button look.

The input inside takes the group's size class and draws no frame of its own; a multi-line input is at least 64px tall. The ring shows while the input has focus. IsInvalid, or a validation error on the input or the group, shows the danger border and ring. A disabled group, or a disabled input, disables the input and the addons and fades the group to half; IsReadOnly makes the input read-only. A press on an addon, other than on a button in it, focuses the input.

The demo shows text addons, an invalid group with a button, and a disabled one.

#Examples

A row of text above a search field, and a composer with a counter and a Send button below a multi-line input.

<StackPanel Spacing="12" Width="320" HorizontalAlignment="Left">
  <uikit:InputGroup>
    <uikit:InputGroupAddon Alignment="BlockStart">
      <TextBlock Text="Search the docs" />
    </uikit:InputGroupAddon>
    <uikit:InputGroupAddon>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </uikit:InputGroupAddon>
    <TextBox PlaceholderText="Search..." />
  </uikit:InputGroup>
  <uikit:InputGroup>
    <TextBox AcceptsReturn="True" MinLines="2" MaxLines="6" PlaceholderText="Write a message..." />
    <uikit:InputGroupAddon Alignment="BlockEnd">
      <TextBlock Text="0/280" />
      <Button Content="Send" HorizontalAlignment="Right" />
    </uikit:InputGroupAddon>
  </uikit:InputGroup>
</StackPanel>