Forms

Tyler Forge components are designed to work with forms out of the box. This means that you can use the components within a <form> element and they will work as expected.

This has long been a gap in functionality for web components, but with newly available browser APIs we are able to properly allow for our form-associated elements to participate in native form submission and validation.

Note: This is only available in modern browsers that support the formAssociated API for custom elements.

Form Submission

When using a Forge component within a form, you can expect the component to participate in form submission as you would expect. This means that the component will be able to be submitted with the form and will be included in the form data.

<form>
  <forge-switch name="my-switch">Switch</forge-switch>
  <forge-button type="submit">Submit</forge-button>
</form>

In the above example, the <forge-switch> component will be included in the form data when the form is submitted.

Form Validation

Forge components also support form validation. This means that you can use the native form validation APIs to validate the components within a form.

<form>
  <forge-checkbox name="my-checkbox" required>Checkbox</forge-checkbox>
  <forge-button type="submit">Submit</forge-button>
</form>

In the above example, the <forge-checkbox> component will be required to be checked before the form can be submitted.

Choosing field components

Use the purpose-built field components, like forge-text-field and forge-select. Don’t use forge-field directly: it’s an internal building block those components are built on.

Labels

Give every field a visible label. The only exception is an unlabeled search or filter field, which sets label-position="none" and an aria-label so it still has an accessible name.

<forge-text-field label-position="none">
  <input type="search" aria-label="Search orders" />
</forge-text-field>

Autofill

Set the autocomplete attribute on inputs with a standard token, such as name, email, tel, username, or current-password, so browsers can autofill them.

<forge-text-field>
  <label for="email">Email</label>
  <input id="email" type="email" autocomplete="email" />
</forge-text-field>

Frameworks

It’s important to note that the above examples are using vanilla HTML forms. If you are using a framework like React, Angular, or Vue, you will likely be using a form library that abstracts the form APIs. In these cases, you will need to refer to the documentation for the specific form library you are using to understand how to properly use Forge components within a form.