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 TextInput, Select, DateInput, Check, MemoInput, 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

  • <FieldsLabel> used to label the whole container and renders a <legend> when Group is enabled.

• Group turns <Field> or <Fields> into semantic group containers.

  • In a grouped <Field>, <FieldLabel> renders a <legend>.

  • <FieldSet> and <Legend> remain available as simple native wrappers when you want to render those elements directly.

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.

<Field> is also the main semantic unit for forms in Blazorise. When a field contains one primary control together with <FieldLabel>, <FieldHelp>, and validation feedback, Blazorise has enough context to keep visible form layout and accessibility metadata aligned.

When a question is answered by multiple related controls, such as a RadioGroup or a set of checkboxes, prefer enabling Group on <Field> or <Fields>. In a grouped <Field>, <FieldLabel> renders a <legend>, and in a grouped <Fields> container, <FieldsLabel> labels the whole set.

By default, Blazorise uses the <Field> structure to automatically render for on <FieldLabel> for labelable controls, aria-labelledby for non-labelable controls such as RadioGroup, ColorPicker, RichTextEdit, Markdown, and SignaturePad, aria-describedby from <FieldHelp> and validation messages, and aria-invalid from validation state.

You can still override any association when needed with FieldLabel.For, AriaLabelledBy, AriaDescribedBy, and AriaInvalid. Automatic accessibility integrations are enabled by default and can be controlled globally through BlazoriseOptions.AccessibilityOptions.

Examples

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

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

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

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

<Field>
    <FieldLabel>Disabled</FieldLabel>
    <TextInput Value="Value" Disabled />
</Field>

<Field Horizontal>
    <FieldLabel ColumnSize="ColumnSize.Is2">Name</FieldLabel>
    <FieldBody ColumnSize="ColumnSize.Is10">
        <TextInput 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">
    <TextInput />
</Field>

<Fields>
    <Field ColumnSize="ColumnSize.Is6.OnDesktop">
        <FieldLabel>City</FieldLabel>
        <TextInput />
    </Field>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>State</FieldLabel>
        <Select TValue="string">
        </Select>
    </Field>
    <Field ColumnSize="ColumnSize.Is2.OnDesktop">
        <FieldLabel>Zip</FieldLabel>
        <TextInput />
    </Field>
</Fields>

<Fields Gutter="Gutter.Is1">
    <Field ColumnSize="ColumnSize.Is6.OnDesktop">
        <FieldLabel>City</FieldLabel>
        <TextInput />
    </Field>
    <Field ColumnSize="ColumnSize.Is4.OnDesktop">
        <FieldLabel>State</FieldLabel>
        <Select TValue="string">
        </Select>
    </Field>
    <Field ColumnSize="ColumnSize.Is2.OnDesktop">
        <FieldLabel>Zip</FieldLabel>
        <TextInput />
    </Field>
</Fields>

<Field Group>
    <FieldLabel RequiredIndicator>Preferred contact method</FieldLabel>
    <RadioGroup TValue="string" Name="contact-method" @bind-Value="@contactMethod">
        <Radio Value="@("email")">Email</Radio>
        <Radio Value="@("phone")">Phone</Radio>
        <Radio Value="@("sms")">SMS</Radio>
    </RadioGroup>
</Field>

<Div Margin="Margin.Is4.FromTop">
    <Fields Group>
        <FieldsLabel>Shipping address</FieldsLabel>
        <Field>
            <FieldLabel>Street</FieldLabel>
            <TextInput Placeholder="1234 Main St" />
        </Field>
        <Field>
            <FieldLabel>City</FieldLabel>
            <TextInput Placeholder="Zagreb" />
        </Field>
    </Fields>
</Div>

@code {
    string contactMethod = "email";
}

<Field>
    <FieldLabel RequiredIndicator>
        Name
    </FieldLabel>
    <FieldBody>
        <TextInput 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.

• Use Group on <Field> or <Fields> when one label applies to a group of related controls instead of a single input.

• Keep <FieldLabel>, the primary input, <FieldHelp>, and validation feedback in the same <Field> so Blazorise can generate the correct accessibility attributes automatically.

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.

• Don't keep a grouped radio or checkbox question in the default single-input mode when the label really belongs to the whole set.

Related components include <FieldLabel>, <FieldBody>, <FieldHelp>, <TextInput>, <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

FieldSet

Legend

Fields

FieldsLabel