FieldFrame

The label, hint and errors around a control of your own.

JavaScript off: what the HTML and CSS do on their own.

The shared frame around every field: label, control, hint, errors. Field components use it; custom fields can too, to match the built-in ones.

Usage

razor

<FieldFrame Id="due" Label="Due date" Hint="A weekday." HintId="due-hint">
    <input id="due" type="date" name="due" aria-describedby="due-hint" />
</FieldFrame>

A control of your own

Use FieldFrame to give your own control the label, hint, required mark and messages of the built-in fields; the control points at the hint and messages with aria-describedby.

Preview Code

Preview

Code

Custom.razor

@using System.ComponentModel.DataAnnotations

@* NativeValidation="false" skips the browser's check, so the server's message shows. The form takes
   an EditContext so the frame can show the field's messages and the input can point at them. *@
<Form EditContext="_edit" FormName="field-frame-custom" OnValidSubmit="Save" NativeValidation="false" MaxWidth="20.Rem" Grow>
    <FieldFrame Class="ib-field" Id="due-date" Label="Due date" Required Hint="Reminders go out the day before." HintId="due-date-hint"
                Errors="Errors" ErrorId="due-date-error">
        <div class="ib-field-control">
            <InputDate @bind-Value="Model!.Due" id="due-date" class="ib-field-input" required
                       aria-invalid="@(Errors.Count > 0 ? "true" : null)"
                       aria-describedby="@(Errors.Count > 0 ? "due-date-hint due-date-error" : "due-date-hint")" />
        </div>
    </FieldFrame>
    <Row><Button Submit>Set due date</Button></Row>
    @if (_saved)
    {
        <Alert Status="Status.Success">Due @(Model!.Due?.ToString("MMMM d")).</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "field-frame-custom")]
    private Assignment? Model { get; set; }

    private EditContext _edit = null!;
    private bool _saved;

    private IReadOnlyList<string> Errors => _edit.GetValidationMessages(new FieldIdentifier(Model!, nameof(Assignment.Due))).ToList();

    protected override void OnInitialized()
    {
        Model ??= new();
        _edit = new EditContext(Model);
    }

    private void Save() => _saved = true;

    public sealed class Assignment
    {
        [Required(ErrorMessage = "Pick a due date")]
        public DateOnly? Due { get; set; }
    }
}

Add-ons

Use FieldAddons to attach text or a button to the start or end of your own control.

Preview Code

Preview

Workspace address

https://

.acme.app

Lowercase letters, numbers and dashes.

Code

Addons.razor

<Box MaxWidth="26.Rem" Grow>
    <FieldFrame Class="ib-field" Id="subdomain" Label="Workspace address" Hint="Lowercase letters, numbers and dashes." HintId="subdomain-hint">
        <FieldAddons>
            <StartAddon>https://</StartAddon>
            <EndAddon>.acme.app</EndAddon>
            <ChildContent>
                <div class="ib-field-control">
                    <input id="subdomain" class="ib-field-input" name="subdomain" value="design-team" autocomplete="off" aria-describedby="subdomain-hint" />
                </div>
            </ChildContent>
        </FieldAddons>
    </FieldFrame>
</Box>

Parts

Written inside FieldFrame. The API page lists their parameters.

FieldAddons: attaches add-ons to the start or end of a field's control: text such as "https://" or "kg", a button, or another field such as a currency Select.
FieldError<TValue>: validation messages for one model property, for fields that are not IzzyBlazor fields.

Mode support

What works in each mode, FieldFrame
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a label whose for is Id, so the control needs that id; with Group, a fieldset whose legend names the group.
It renders the hint and errors with HintId and ErrorId; a custom control links them with aria-describedby (with Group, the fieldset carries it) and sets aria-invalid itself.
HideLabel keeps the label for screen readers; LabelId lets a control that isn't a native input take its name with aria-labelledby.
The required asterisk is hidden from screen readers, so mark the control required too; where it can't be (a group of checkboxes), AnnounceRequired adds "(required)" for them after the label.
Add-on text from FieldAddons isn't part of the control's name.
FieldError's messages are linked through its Id: point the control's aria-describedby at it. An IzzyBlazor field links its own.

Parameters

FieldFrame parameters
Prop	Type	Default
`Class`Classes for the wrapper.	`string?`
`Style`Inline style for the wrapper.	`string?`
`Id`The control's id, for the label's for.	`string?`
`LabelId`An id for the label, for controls that point to it with aria-labelledby.	`string?`
`Label`The label text.	`string?`
`HideLabel`Keeps the label for screen readers but doesn't show it.	`bool`	`false`
`Required`Whether the field is required: an asterisk, or no "(optional)", depending on the form's RequiredMark.	`bool`	`false`
`AnnounceRequired`Says "(required)" to screen readers after the label of a required field (Required), for controls that can't be marked required themselves, such as a group of checkboxes.	`bool`	`false`
`Hint`Help text.	`string?`
`HintId`The hint element's id.	`string?`
`Errors`Validation messages.	`IReadOnlyList<string>?`
`ErrorId`The error element's id.	`string?`
`Group`Renders a fieldset with a legend, for groups of controls such as radios.	`bool`	`false`
`LabelInControl`The control renders its own label (checkboxes and switches).	`bool`	`false`
`ChildContent`The control.	`RenderFragment?`

Full API