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 wrapper around the native <form> element. You do not have to use it, but it is where the shared input settings live: set variant, size, rounded or floatingLabel once on the form and every field inside picks them up.

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>

Every input inside it picks up those settings, so a change in one place reaches the whole form.

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.

Shared Input Settings

The Form component passes these props down to all the inputs inside it, so you can style every input from one place:

  • variant: "bordered" (default) or "flat".
  • size: "sm", "md" (default), "lg" or "xl".
  • floatingLabel: shows the label inside the input and moves it up on focus. It is true by default for the "flat" variant and false otherwise.
  • rounded: the border radius of the inputs. The default is "md".
  • animationSpeed: the transition speed of the inputs and floating labels. The default is "normal".
  • labelClasses: custom classes for all the input labels.
  • reset: removes the default input styles so only your own classes apply. The default is false.

A Fieldset inside the form can override these settings for its own inputs, and each input can override them with its own props.

Svelte 
<Form variant="flat" size="lg">
  <Input name="name">Your name</Input>
  <Input name="email" type="email">Email address</Input>
  <Button type="submit">Submit</Button>
</Form>

Progressive Enhancement

The enhance prop accepts a Svelte action that is applied to the <form> element. Pass SvelteKit's enhance action to submit the form without a full page reload, while keeping it working when JavaScript is unavailable.

Svelte 
<script>
  import { enhance } from "$app/forms";
  import { Form } from "theui-svelte";
</script>

<Form action="?/login" {enhance}>
  <!-- Form inputs go here -->
</Form>

Accessibility

The Form component renders a native <form> element, which browsers and screen readers already understand. Any ARIA role, label or attribute you pass is spread onto it, so you can add whatever a particular page needs.

Configuration

Some of the Form props are not used by the form element itself. They are handed down to the inputs inside it, so you set them once instead of on every field.