Forms

This package is experimental and is meant for internal use only.

Introduction

This package is a simple wrapper that ties in flowbite-svelte UI components with superforms and formsnap for added accessibility. Simply install the package via

1pnpm add @tanglemedia/svelte-starter-forms

Once installed you can start using the various helper components.

Usage

Basic example

login.schema.ts

1import { object, string, type InferType } from 'yup';
2
3export let loginSchema = object({
4  email: string().required('Please enter your email').default(''),
5  password: string().required('Please enter your password').default('')
6});
7
8export type LoginSchema = InferType<typeof loginSchema>;

Login.svelte

1<script lang="ts">
2  import {
3		FormProvider,
4		PasswordInput,
5		SubmitButton,
6		TextInput
7	} from '@tanglemedia/svelte-starter-forms';
8  import type { LoginSchema } from '$lib/schema';
9
10  export let data: SuperValidated<LoginSchema>;
11
12	const superform = superForm(data);
13</script>
14
15<FormProvider {superform} action={'?/login'}>
16  <TextInput name={'email'} label={'Email'} />
17  <PasswordInput name={'email'} label={'Email'} />
18  <SubmitButton>
19		Save
20	</SubmitButton>
21</FormProvider>

Custom inputs

The base input is a wrapper component that'll pass the necessary variables to make your form work

BaseInput

This wraps a from group that includes the label if the label prop is passed. This is used for most basic text inputs.

1<script lang="ts">
2  import { BaseInput } from '@tanglemedia/svelte-starter-forms';
3</script>
4
5<!-- The following variables are passed to the child slot. These are forwarded from formsnap and superforms -->
6<BaseInput
7  let:superform
8  let:value
9  let:constraints
10  let:errors
11  let:tainted
12  let:attrs
13>
14  <!-- Your input here -->
15</BaseInput>

Accessing the superforms object

As long as the component is a child for the <FormProvider /> then it'll have access to the superforms object via context.

1<script lang="ts">
2  import { getForm } from '@tanglemedia/svelte-starter-forms';
3
4  const superform = getForm<YourOptionalShemaType>();
5</script>
6
7<!-- The following variables are passed to the child slot. These are forwarded from formsnap and superforms -->
8<BaseInput
9  let:superform
10  let:value
11  let:constraints
12  let:errors
13  let:tainted
14  let:attrs
15>
16  <!-- Your input here -->
17</BaseInput>