Field
A set of composable form field components for building accessible forms
Examples
Input
Textarea
Select
Checkbox
Radio Group
Switch
With Separator
With Error
- Password must be at least 8 characters
- Password must contain a number
Disabled
Input with Addon
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| FieldSet | Outer <fieldset> grouping a set of related form fields. Typically contains a FieldLegend followed by FieldGroups. |
| FieldLegend | Heading for a FieldSet. Renders a <legend> element with a visual variant controlling typography weight. |
| FieldGroup | Vertical stack of Fields with consistent spacing. Place one or more of these inside a FieldSet. |
| Field | Wrapper for a single form control plus its label, description, and error. Controls orientation (vertical vs horizontal) and invalid-state styling for nested inputs. |
| FieldLabel | Label for the control inside a Field. Renders a <label> element with Blok's label typography. |
| FieldDescription | Helper text placed beneath a control inside a Field. Muted foreground, smaller type. |
| FieldError | Destructive-coloured message shown below a control. Accepts explicit ChildContent or an Errors list; renders nothing when both are empty. |
| FieldContent | Vertical sub-stack within a Field, used to group a control with adjacent helper text or actions. |
| FieldTitle | Bold heading placed inside a Field when the control needs a prominent title (e.g. multi-line toggles). |
| FieldSeparator | Horizontal divider between sections of a FieldSet. Renders as a rule by default, or a labelled rule when ChildContent is supplied. |
FieldSet
Outer <fieldset> grouping a set of related form fields. Typically contains a FieldLegend followed by FieldGroups.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <fieldset>. | |
| ChildContent | RenderFragment? | Legend, groups, and separators that make up the fieldset. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <fieldset>. |
FieldLegend
Heading for a FieldSet. Renders a <legend> element with a visual variant controlling typography weight.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | FieldLegendVariant | Typography style. Default: FieldLegendVariant.Legend (larger, semibold). Other value: Label (smaller, medium weight). | |
| ClassName | string? | Extra CSS classes appended to the <legend>. | |
| ChildContent | RenderFragment? | Legend text or inline markup. |
FieldGroup
Vertical stack of Fields with consistent spacing. Place one or more of these inside a FieldSet.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the group container. | |
| ChildContent | RenderFragment? | One or more Field children. |
Field
Wrapper for a single form control plus its label, description, and error. Controls orientation (vertical vs horizontal) and invalid-state styling for nested inputs.
| Property | Type | Required | Description |
|---|---|---|---|
| Orientation | FieldOrientation | Label/control layout. Default: FieldOrientation.Vertical. Other value: Horizontal (label and control on the same row). | |
| DataInvalid | bool | When true, applies destructive border styling to nested inputs/selects/textareas. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the field container. | |
| ChildContent | RenderFragment? | Typically one FieldLabel, one control, and optional FieldDescription / FieldError. |
FieldLabel
Label for the control inside a Field. Renders a <label> element with Blok's label typography.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the <label>. | |
| ChildContent | RenderFragment? | Label text or inline markup. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes (e.g. for), forwarded to the <label>. |
FieldDescription
Helper text placed beneath a control inside a Field. Muted foreground, smaller type.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description container. | |
| ChildContent | RenderFragment? | Description text or inline markup. |
FieldError
Destructive-coloured message shown below a control. Accepts explicit ChildContent or an Errors list; renders nothing when both are empty.
| Property | Type | Required | Description |
|---|---|---|---|
| Errors | List<string>? | Error messages. A single entry renders as a <span>; multiple entries render as a bulleted list. | |
| ClassName | string? | Extra CSS classes appended to the error container. | |
| ChildContent | RenderFragment? | Custom error content. When supplied, overrides the Errors list rendering. |
FieldContent
Vertical sub-stack within a Field, used to group a control with adjacent helper text or actions.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the content container. | |
| ChildContent | RenderFragment? | Contents of the sub-stack. |
FieldTitle
Bold heading placed inside a Field when the control needs a prominent title (e.g. multi-line toggles).
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title container. | |
| ChildContent | RenderFragment? | Title text or inline markup. |
FieldSeparator
Horizontal divider between sections of a FieldSet. Renders as a rule by default, or a labelled rule when ChildContent is supplied.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the separator. | |
| ChildContent | RenderFragment? | Optional label centred on the rule. |