Svelte 5 forms w00t w00t

A simple form library for Svelte that uses tailwind and bits-ui.

Installation

1npm install @mateothegreat/svelte-5-forms

Usage

1<script lang="ts">
2  import * as Form from "@mateothegreat/svelte5-forms";
3  import { FormInstance, minLength } from "@mateothegreat/svelte5-forms";
4  import { Palette } from "phosphor-svelte";
5
6  type MyDataType1 = {
7    name: string;
8    foobar: {
9      value: string;
10      label: string;
11    }[];
12    agree: boolean;
13  };
14
15  const items = [
16    { value: "mango", label: "Mango" },
17    { value: "watermelon", label: "Watermelon" },
18    { value: "apple", label: "Apple" }
19  ];
20
21  let form: FormInstance;
22  let valid: boolean;
23
24  const controls = $state([
25    {
26      name: "name",
27      value: "mateothegreat",
28      validators: [minLength(3)]
29    },
30    {
31      name: "foobar",
32      data: items,
33      validators: [minLength(2)],
34      displayFn: (data: (typeof items)[number]) => {
35        return data.label;
36      }
37    },
38    {
39      name: "agree",
40      validators: [minLength(2)]
41    }
42  ]);
43</script>
44
45{#snippet selectPrefix()}
46  <div class="text-muted-foreground">
47    <Palette class="size-6 dark:text-sky-600" />
48  </div>
49{/snippet}
50
51<div class="absolute flex h-full w-full items-center justify-center gap-14 bg-zinc-900 p-10">
52  <div class="w-96 rounded-lg bg-black p-4 shadow-xl">
53    <Form.Root bind:form {controls}>
54      <Form.Group>
55        <Form.Field>
56          <Form.Header.Root>
57            <Form.Header.Label>Name</Form.Header.Label>
58            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
59          </Form.Header.Root>
60          <Form.Controls.Input {form} name="name" />
61        </Form.Field>
62        <Form.Field>
63          <Form.Header.Root>
64            <Form.Header.Label>Foo Bar</Form.Header.Label>
65            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
66          </Form.Header.Root>
67          <Form.Controls.Select
68            {form}
69            placeholder="Select something cool.."
70            name="foobar"
71            type="multiple"
72            prefix={selectPrefix} />
73        </Form.Field>
74      </Form.Group>
75      <Form.Group>
76        <Form.Field>
77          <Form.Header.Root>
78            <Form.Header.Label>Name</Form.Header.Label>
79            <Form.Header.Description>Foo bar baz pow.</Form.Header.Description>
80          </Form.Header.Root>
81          <Form.Controls.Switch {form} name="agree" class="rounded-lg border-2 border-slate-800 bg-zinc-900/40 p-2">
82            <span class="text-xs text-sky-500">I agree to be awesome.</span>
83          </Form.Controls.Switch>
84        </Form.Field>
85      </Form.Group>
86    </Form.Root>
87  </div>
88  <div class="w-96 rounded-lg bg-black p-4 shadow-xl">
89    <pre class="text-xs text-slate-500">{JSON.stringify(form.values, null, 2)}</pre>
90    <pre class="text-xs text-slate-500">{JSON.stringify(form.errors, null, 2)}</pre>
91    <pre class="text-xs text-slate-500">valid: {form.valid}</pre>
92  </div>
93</div>