To source

a-form-field

A wrapper element for form inputs that handles validation states and error messages.

The a-form-field element wraps form inputs to provide consistent validation handlinga and error display.

Please enter a valid email address

Used by Form and various input components.

Usage

Basic Form Field

<a-form-field>
  <label slot="label">Username</label>
  <input type="text" name="username" required />
  <a-form-field-error></a-form-field-error>
</a-form-field>

Form Integration

Complete Form Example

<form id="signup-form">
  <a-form-field>
    <label slot="label">Name</label>
    <input type="text" name="name" required />
    <a-form-field-error>Please enter your name</a-form-field-error>
  </a-form-field>

  <a-form-field>
    <label slot="label">Email</label>
    <input type="email" name="email" required />
    <a-form-field-error>Please enter a valid email</a-form-field-error>
  </a-form-field>

  <a-form-field>
    <label slot="label">Password</label>
    <input type="password" name="password" required minlength="8" />
    <span slot="helper">Minimum 8 characters</span>
    <a-form-field-error>Password must be at least 8 characters</a-form-field-error>
  </a-form-field>

  <button type="submit">Sign Up</button>
</form>
Please enter your namePlease enter a valid emailMinimum 8 charactersPassword must be at least 8 characters

FormFieldElement

A form field can be any single field of a form. It is used to capture changes and validation events of a form field.

Example

<form>
  <a-form-field>
    <input name="name" required />
  </a-form-field>
</form>

FormFieldErrorElement

The form field error element is responseible for displaying validation errors to the user.

Example

<form>
  <a-form-field field="name">

    <input name="name" required />
    <a-form-field-error />

  </a-form-field>
</form>

Attributes

Name Type Default value Description

References