Field component

Field

The Field is a container for Text, Select, Date, Check, Memo, and optionally for Button. Structure is very simple:

  • Field the main container
    • FieldLabel a field label
    • FieldBody used only for horizontal fields
    • FieldHelp small text bellow the field
  • Fields container used to group several Field components

It is recomended to always place input components inside of a field. That way you will keep the right spacing and arangement between input controls.

Basic example

<Field>
    <TextEdit Placeholder="Name" />
<Field>

With label

<Field>
    <FieldLabel>Email address</FieldLabel>
    <TextEdit Placeholder="Enter email" />
<Field>

With help

<Field>
    <FieldLabel>Email address</FieldLabel>
    <TextEdit Placeholder="Enter email">
        <FieldHelp>Please enter a valid email address</FieldHelp>
    </TextEdit>
<Field>

Horizontal field

When using horizontal field you must place input controls inside of the FieldBody tag.

<Field IsHorizontal="true">
    <FieldLabel ColumnSize="ColumnSize.Is2">Name</FieldLabel>
    <FieldBody ColumnSize="ColumnSize.Is10">
        <TextEdit Placeholder="Some text value..." />
    </FieldBody>
</Field>

Visibility

Use Visibility attribute to hide a field while still preserving it’s space.

<Field Visibility="Visibility.Never">
    <TextEdit />
</Field>

Fields

Fields component is used to group multiple Field components. For example if you need to group fields into columns you must use fields component.

<Fields>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop">
        <FieldLabel>City</FieldLabel>
        <TextEdit />
    </Field>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>State</FieldLabel>
        <SelectEdit>
        </SelectEdit>
    </Field>
    <Field ColumnSize="ColumnSize.Is2.OnDesktop">
        <FieldLabel>Zip</FieldLabel>
        <TextEdit />
    </Field>
</Fields>