# 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 `

` 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: ```html

``` 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 **** element. Available values are `GET` and `POST`. Default `POST`. ```html

``` 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. ```html

Your name Email address Submit

``` ## Progressive Enhancement The `enhance` prop accepts a Svelte action that is applied to the `

` element. Pass SvelteKit's `enhance` action to submit the form without a full page reload, while keeping it working when JavaScript is unavailable. ```html

``` ## Accessibility The `Form` component renders a native `

` 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. ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `method` | 'GET' \| 'POST' | `POST` | Defines the form submit method. | | `enhance` | Action | `undefined` | A Svelte action applied to the form element, like SvelteKit's `enhance` from `$app/forms`. | | `variant` | [INPUT_VARIANT](https://www.theui.dev/docs/types#input-variant-type) | `bordered` | Defines the visual style of the inputs. | | `size` | [INPUT_SIZE](https://www.theui.dev/docs/types#input-size-type) | `md` | Defines the size of the inputs: "sm", "md", "lg" or "xl". | | `floatingLabel` | boolean | `true (if variant == "flat")` | Enables or disables floating labels for inputs. If variant is set to "flat", this defaults to true and false otherwise. | | `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `normal` | Controls the animation speed for inputs. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `md` | Controls the border radius of inputs. | | `labelClasses` | string | `undefined` | Allows custom CSS classes to be applied to input labels for additional styling. | | `reset` | boolean | `false` | Resets all the defaults styles and apply only the custom styles. | --- Category: Components Keywords: form, submission, inputs, wrapper, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt