Field component

The <Field> is a container for TextEdit, Select, DateEdit, Check, MemoEdit, 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 recommended to always place input components inside of a field. That way you will keep the right spacing and arrangement between input controls.

Examples

Basic

To properly structure your form you just need to place an input inside of a Field.
<Field>
    <TextEdit Placeholder="Name" />
</Field>

With label

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

With help

Please enter a valid email address
<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 Horizontal="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.Invisible">
    <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>
        <Select TValue="string">
        </Select>
    </Field>
    <Field ColumnSize="ColumnSize.Is2.OnDesktop">
        <FieldLabel>Zip</FieldLabel>
        <TextEdit />
    </Field>
</Fields>

Attributes

Field

Name Description Type Default
Horizontal Aligns the controls for horizontal form. boolean false
ColumnSize Determines how much space will be used by the field inside of the grid row. ColumnSize null
JustifyContent Aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally). JustifyContent None

FieldLabel

Name Description Type Default
Screenreader Defines the visibility for screen readers. Screenreader Always

Fields

Name Description Type Default
Label Aligns the controls for horizontal form. string null
Help Determines how much space will be used by the field inside of the grid row. string null
ColumnSize Determines how much space will be used by the field inside of the grid row. ColumnSize null