Returnless UI

Form ​

A wrapper component that handles the submission of forms.

Props
accessibilityLabel?:
string
Defaults to undefined
The aria-label attribute to be applied to the link
enctype?:
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"
Defaults to undefined
The encoding type for the form.
id?:
string | null
Defaults to null
The ID of the form.
Events
submit:
[]

Usage ​

We’ll use this email address to inform you on future changes.

js
<script lang="ts" setup>
import { Form, FormLayout, TextField, Button } from '@returnless/focus-ui';
</script>

<template>
  <Form>
    <FormLayout>
      <TextField label="Name" />
      <TextField label="Email" type="email" help-text="We’ll use this email address to inform you on future changes." />
      <Button>Submit</Button>
    </FormLayout>
  </Form>
</template>

Best practices ​

The form component should be used to:

  • Wrap around all form input elements.
  • Emulate the native HTML form element behavior with a custom onSubmit callback.

Accessibility ​

The form component wraps content in an HTML <form> element. This helps to support assistive technologies that use different interaction and browse modes.

Forms can have only one submit button, and it must be at the end of the form. By default, buttons added to the form are given a type attribute set to button to avoid conflicts. To make a button the submit button instead (type="submit"), set the submit prop on the button.