Form

A reusable wrapper for the HTML form element, simplifying form creation, submission handling, event management and controlling all the inputs from a single place.

About

The Form component is a reusable wrapper for the native HTML <form> element, designed to simplify form creation and management. While it’s not mandatory to use this component for every form, its primary benefit lies in centralizing control over input styles and common behaviors. By using the Form component, you can ensure consistent styling and functionality across all forms in your application, making it easier to maintain and update them from a single place.

Example

To use the Form component, simply import it from the library and wrap your form inputs inside it. Here's a basic example:

Svelte 
<script>
  import { Form } from "theui-svelte";
</script>

<Form>
  <!-- Add your form inputs here -->
</Form>

The component ensures consistent styling and behavior for all child inputs, making it easier to manage forms across your application.

Form Method

The method prop specifies the HTTP method to be used when the form is submitted. It corresponds to the native HTML method attribute of the <form> element. Available values are GET and POST. Default POST.

Svelte 
<Form method="GET">
  <!-- Form inputs go here -->
</Form>

In this example, the form will use the GET method when submitted, appending the form data to the URL. If no method is specified, it defaults to POST.

Accessibility

The Form component uses the native <form> element, which is already accessible by default. It supports all ARIA roles, labels, and attributes via props, ensuring that keyboard navigation and screen readers can interact with it without extra configuration. This makes it easy to use for all users, including those with disabilities.

Configuration

The Form component includes a set of props that are not directly applied to the form itself but are passed down to all its child inputs. These props ensure a consistent appearance and behavior across all form inputs, making it easier to maintain uniformity without manually configuring each input.