# Field

Source: https://lumeo.nativ.sh/components/field

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Field />

## When to Use

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

Preview Code

Login form

### Login to your account

Enter your email below to login to your account

Email

Password [Forgot your password?](#)

Login Login with Google

Don't have an account? [Sign up](#)

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

Preview Code

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.

Preview Code

Fieldset, separator and errors

Address

Where the order ships.

Street

City

City is required

Or continue with

Continue with GitHub

## API Reference

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.