Field

The field is mostly an internal component that wraps form elements like inputs, radios, and checkboxes. It provides a consistent layout for form elements and includes a label and description. But you can also use it to wrap custom form elements.

Basic Usage

Error rendering component

Copy to clipboard

<aura:field>
    <aura:label for="username" text="Username" />
    <aura:input name="username" />
    <aura:description text="Your username" />
</aura:field>

With disabled state

when a field is disabled, the input element is disabled and the label is styled to indicate that the field is disabled.

Error rendering component

Copy to clipboard

<aura:field>
    <aura:label text="Label" />
    <aura:some-random-form-element /
    <aura:description text="Your username" />
    <aura:input-error for="element-name"/>
</aura:field>

With error state

when a field has an error, the input element is styled to indicate that the field has an error and an error message is displayed.

Error rendering component

Copy to clipboard

<aura:field>
    <aura:label text="Label" />
    <aura:some-random-form-element /
    <aura:input-error for="element-name"/>
</aura:field>

Custom message

You can override the error message by passing a custom error message to the error attribute.

Error rendering component

Copy to clipboard

<aura:field>
    <aura:label text="Label" />
    <aura:some-random-form-element /
    <aura:input-error for="element-name" text="Custom error message"/>
</aura:field>

Home