Form Item

<esp-form-item>

Wraps fields with label and error message functionality. For more information about forms, read our guide work working with forms.

Attributes

<esp-form-item> has the following attributes:

label

label has a default value of "".

Label text to display for the given form control.

autofocus

autofocus has a default value of false.

When true, the first control where autofocus is true has focus captured.

error

error has a default value of undefined.

An error message to show for the given form control.

warning

warning has a default value of undefined.

A warning message to show for the given form control. Warning is hidden when an error is also present.

field-name

field-name has a default value of "".

Identifies this form item's field. Serves two purposes:

Filters errors from the bound errorPool to show only errors whose fieldName matches.
Propagates as the name attribute on the slotted form field, so there is no need to set name separately.

error-pool

error-pool has a default value of undefined.

Bind to an array of ValidationError to automatically filter and show errors whose fieldName matches this item's field-name attribute.

CSS Properties

<esp-form-item> has the following CSS properties:

--esp-form-item-label-color

The color of the label text.

--esp-form-item-error-color

The color of the visible error badge text.

--esp-form-item-error-background

The background color of the visible error badge.

--esp-form-item-error-field-background

The background color applied to slotted fields while an error is shown.

--esp-form-item-error-field-border-color

The border color applied to slotted fields while an error is shown.

--esp-form-item-error-field-text-color

The text color applied to slotted fields while an error is shown.

--esp-form-item-error-field-focus-shadow

The focus shadow color applied to slotted fields while an error is shown.

--esp-form-item-warning-color

The color of the visible warning badge text.

--esp-form-item-warning-background

The background color of the visible warning badge.

--esp-form-item-warning-field-background

The background color applied to slotted fields while a warning is shown.

--esp-form-item-warning-field-border-color

The border color applied to slotted fields while a warning is shown.

--esp-form-item-warning-field-text-color

The text color applied to slotted fields while a warning is shown.

--esp-form-item-warning-field-focus-shadow

The focus shadow color applied to slotted fields while a warning is shown.

--esp-form-item-font

The font family for the form item.

--esp-form-item-font-size

The font size for the form item.