Blazorise Field component

A flexible layout container used to organize and align form input components for better usability, accessibility, and structure.

The <Field> component acts as a lightweight form layout wrapper that groups a label, input control, help text, and validation message into a single, consistent container. It works with common Blazorise form controls such as TextEdit, Select, DateEdit, Check, MemoEdit, and optionally Button. Its structure is intentionally minimal, making it easy to build clear, predictable, and accessible form layouts.

• <Field> the main container.

  • <FieldLabel> used for the label of the field.

  • <FieldBody> the container for the input control.

  • <FieldHelp> used for the help text.

• <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 consistent spacing, alignment, and arrangement between input controls across your forms.

Examples

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

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

<Fields>
    <Field>
        <FieldLabel>Phone number</FieldLabel>
        <TextEdit>
            <FieldHelp>Include country and area prefixes</FieldHelp>
        </TextEdit>
    </Field>
    <Field>
        <FieldLabel>Password</FieldLabel>
        <TextEdit>
            <FieldHelp>Password strength: <Text TextColor="TextColor.Danger">weak</Text></FieldHelp>
        </TextEdit>
    </Field>
</Fields>

<Field>
    <FieldLabel>Read-Only</FieldLabel>
    <TextEdit Text="Value" ReadOnly />
</Field>

<Field>
    <FieldLabel>Disabled</FieldLabel>
    <TextEdit Text="Value" Disabled />
</Field>

<Field Horizontal>
    <FieldLabel ColumnSize="ColumnSize.Is2">Name</FieldLabel>
    <FieldBody ColumnSize="ColumnSize.Is10">
        <TextEdit Placeholder="Some text value..." />
    </FieldBody>
</Field>
<Field Horizontal>
    <FieldLabel ColumnSize="ColumnSize.Is2">Check me</FieldLabel>
    <FieldBody ColumnSize="ColumnSize.Is10" Margin="Margin.IsAuto">
        <Check TValue="bool" />
    </FieldBody>
</Field>

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

<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>

<Field>
    <FieldLabel RequiredIndicator>
        Name
    </FieldLabel>
    <FieldBody>
        <TextEdit Placeholder="Name" />
    </FieldBody>
</Field>

Best Practices

Do

• Use <Field> to provide a consistent label, layout, and validation message for each form control.

• Use <Field> to label controls that do not have built-in labels, such as <ProgressBar> or custom components.

• Use <Fields> to group related <Field> components when building multi-column or sectioned form layouts.

Don't

• Avoid combining a long validation message and extensive helper text in the same field, as this can overwhelm users.

• Don't add multiple interactive controls as children of a single <Field>. The label should clearly describe one primary control for better accessibility.

Related components include <FieldLabel>, <FieldBody>, <FieldHelp>, <TextEdit>, <Select>, and <Check>. Together they help you build accessible and visually consistent forms.

In summary, the <Field> component simplifies form layout in Blazorise by aligning labels, inputs, help text, and validation messages, while the <Fields> container lets you organize multiple fields into structured sections.

API

Parameters

Field

FieldLabel

Fields