GitHub

Form

PreviousNext

GPUI Kit's form grid, with labelled fields, required marks and descriptions.

New control
InteractiveForm demo
<gpui:Form Width="360" HorizontalAlignment="Left">
  <gpui:FormField Label="Name">
    <TextBox PlaceholderText="Enter your name" />
  </gpui:FormField>
  <gpui:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
    <TextBox PlaceholderText="Enter your email" />
  </gpui:FormField>
  <gpui:FormField Label="Plan">
    <ComboBox SelectedIndex="0" HorizontalAlignment="Stretch">
      <ComboBoxItem Content="Free" />
      <ComboBoxItem Content="Pro" />
    </ComboBox>
  </gpui:FormField>
  <gpui:Form.Footer>
    <Button Classes="primary" Content="Save" />
  </gpui:Form.Footer>
</gpui:Form>

Usage

gpui:Form is an ItemsControl of gpui:FormFields laid out in a grid of Columns, placed in order; a field that does not fit the rest of a row starts the next. A field's content is the input, stretched to the field's width; its Label is medium-weight text with a danger * after it when IsRequired, and Description is muted help text under the input, whose row is there even when empty. Footer is content under the fields, aligned to the end of the row. Validation stays with the inputs (DataValidationErrors); the form holds no values.

PropertyOnEffect
ColumnsFormThe number of columns (1 by default)
LabelOrientationForm (inherited)Vertical puts the label above the input, Horizontal beside it
LabelWidthForm (inherited)The width of a label beside its input (140 by default)
GapFormThe gap between rows; columns are three times as far apart
FooterFormContent at the end of the row under the fields
Label, IsRequired, DescriptionFormFieldThe label, its required mark, and the help text
ColumnSpanFormFieldHow many columns the field spans

The size classes on the form set its gaps: rows 8px apart (small 6, large 12) and the label 2px from the input (4 at large). The inputs keep their own size classes.

Examples

LabelOrientation="Horizontal" puts the labels beside the inputs, 140px wide by default; LabelWidth narrows or widens them.

Horizontal labels
InteractiveForm demo: Horizontal labels
<StackPanel Spacing="24" Width="360" HorizontalAlignment="Left">
  <gpui:Form LabelOrientation="Horizontal">
    <gpui:FormField Label="First name">
      <TextBox PlaceholderText="Enter first name" />
    </gpui:FormField>
    <gpui:FormField Label="Last name" IsRequired="True">
      <TextBox PlaceholderText="Enter last name" />
    </gpui:FormField>
    <gpui:FormField Label="Email" Description="Used for sign in.">
      <TextBox PlaceholderText="Enter email" />
    </gpui:FormField>
  </gpui:Form>
  <gpui:Form LabelOrientation="Horizontal" LabelWidth="100">
    <gpui:FormField Label="Name">
      <TextBox PlaceholderText="Enter name" />
    </gpui:FormField>
    <gpui:FormField Label="Email">
      <TextBox PlaceholderText="Enter email" />
    </gpui:FormField>
  </gpui:Form>
</StackPanel>

Columns="2", with the address field spanning both through ColumnSpan="2".

Columns
InteractiveForm demo: Columns
<gpui:Form Columns="2" Width="520" HorizontalAlignment="Left">
  <gpui:FormField Label="First name">
    <TextBox PlaceholderText="Enter first name" />
  </gpui:FormField>
  <gpui:FormField Label="Last name">
    <TextBox PlaceholderText="Enter last name" />
  </gpui:FormField>
  <gpui:FormField Label="Address" ColumnSpan="2">
    <TextBox PlaceholderText="Enter address" />
  </gpui:FormField>
  <gpui:Form.Footer>
    <Button Classes="primary" Content="Save" />
  </gpui:Form.Footer>
</gpui:Form>

small and large forms, with matching size classes on their inputs and footer buttons.

Sizes
InteractiveForm demo: Sizes
<StackPanel Spacing="24" Width="360" HorizontalAlignment="Left">
  <gpui:Form Classes="small">
    <gpui:FormField Label="Name">
      <TextBox Classes="small" PlaceholderText="Enter name" />
    </gpui:FormField>
    <gpui:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
      <TextBox Classes="small" PlaceholderText="Enter email" />
    </gpui:FormField>
    <gpui:Form.Footer>
      <Button Classes="primary small" Content="Save" />
    </gpui:Form.Footer>
  </gpui:Form>
  <gpui:Form Classes="large">
    <gpui:FormField Label="Name">
      <TextBox Classes="large" PlaceholderText="Enter name" />
    </gpui:FormField>
    <gpui:FormField Label="Email" IsRequired="True" Description="We will never share your email.">
      <TextBox Classes="large" PlaceholderText="Enter email" />
    </gpui:FormField>
    <gpui:Form.Footer>
      <Button Classes="primary large" Content="Save" />
    </gpui:Form.Footer>
  </gpui:Form>
</StackPanel>

Not covered

  • Placing a field at an explicit column (col_start / col_end).
  • Changing the label's text size.