Form

The Form component is a thin wrapper around the HTML <form> element that automatically prevents default browser submission behavior.

Props

Prop	Type	Default	Description
`class`	`string`	`''`	CSS classes to apply to the form.
`overrideDefaultStyling`	`boolean`	`false`	If true, removes the base fluid-form class.
`children`	`Snippet`	`required`	The content of the form.
`...rest`	`HTMLFormAttributes`	`—`	Standard HTML form attributes.

A standard form wrapper that automatically handles preventDefault on submission.

<script>

  import { Form, InputField, Button, Container, Text } from 'fluid-ui-svelte/base';

  let username = $state('');

</script>

<Form class="gap-4">

  <Container class="flex flex-col gap-2">

    <Text type="span" class="text-sm font-medium">Username</Text>

    <InputField bind:value={username} placeholder="Enter username" />

  </Container>

  <Button

    type="submit"

    class="fluid-button-primary"

    onclick={async (event, buttonState) => {

      buttonState.inProgress = true;

      await new Promise((resolve) => setTimeout(resolve, 1000));

      buttonState.inProgress = false;

}}

    {#snippet loadingPlaceholder()}

      <span>Submitting...</span>

    {/snippet}

    Submit

  </Button>

</Form>