Field component


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

    <TextEdit Placeholder="Name" />

With label

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

With help

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

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..." />


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

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


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

    <Field ColumnSize="ColumnSize.Is6.OnDesktop">
        <TextEdit />
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
    <Field ColumnSize="ColumnSize.Is2.OnDesktop">
        <TextEdit />