Field

Label, control, description and error as one spaced unit. shadcn's form-layout primitive, the one every login and signup block is built from.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Field />

Any form: a FieldGroup spaces fields 20px apart, a Field spaces its label, control and description 8px apart
A checkbox or switch beside its text: Orientation="Horizontal" with the text in a FieldContent
A rule with a caption between two parts of a form: FieldSeparator
Validation messages that must read once even when two rules fire: FieldError

Enter your email below to login to your account

shadcn's login-01, the block as it ships.

Horizontal

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Email notifications

Receive a summary every morning.

The control beside its text. FieldContent keeps label and description in their own tight column.

Fieldset, separator and errors

Address

Where the order ships.

Or continue with

Every member takes Class and splats unmatched attributes onto its root. The parameters below are the ones beyond that.

Parameter	Type	Default	Description
Orientation	Field.FieldOrientation	Vertical	On Field. Vertical stacks label, control and description; Horizontal puts the control beside them; Responsive is Vertical until the enclosing FieldGroup is md-wide.
For	string?	null	On FieldLabel. The id of the control the label is for.
Variant	FieldLegend.LegendVariant	Legend	On FieldLegend. Legend is the fieldset title (16px); Label sizes it like a field label for a group of checkboxes or radios.
Errors	IEnumerable<string?>?	null	On FieldError. Messages to show when there is no child content. Blank entries are skipped, duplicates collapse, several become a list, none renders nothing.