@tanglemedia/svelte-starter-forms v0.0.5

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

pnpm add @tanglemedia/svelte-starter-forms

Once installed you can start using the various helper components.

Usage

Basic example

login.schema.ts

import { object, string, type InferType } from 'yup';

export let loginSchema = object({
  email: string().required('Please enter your email').default(''),
  password: string().required('Please enter your password').default('')
});

export type LoginSchema = InferType<typeof loginSchema>;

Login.svelte

<script lang="ts">
  import {
		FormProvider,
		PasswordInput,
		SubmitButton,
		TextInput
	} from '@tanglemedia/svelte-starter-forms';
  import type { LoginSchema } from '$lib/schema';

  export let data: SuperValidated<LoginSchema>;

	const superform = superForm(data);
</script>

<FormProvider {superform} action={'?/login'}>
  <TextInput name={'email'} label={'Email'} />
  <PasswordInput name={'email'} label={'Email'} />
  <SubmitButton>
		Save
	</SubmitButton>
</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.

<script lang="ts">
  import { BaseInput } from '@tanglemedia/svelte-starter-forms';
</script>

<!-- The following variables are passed to the child slot. These are forwarded from formsnap and superforms -->
<BaseInput
  let:superform
  let:value
  let:constraints
  let:errors
  let:tainted
  let:attrs
>
  <!-- Your input here -->
</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.

<script lang="ts">
  import { getForm } from '@tanglemedia/svelte-starter-forms';

  const superform = getForm<YourOptionalShemaType>();
</script>

<!-- The following variables are passed to the child slot. These are forwarded from formsnap and superforms -->
<BaseInput
  let:superform
  let:value
  let:constraints
  let:errors
  let:tainted
  let:attrs
>
  <!-- Your input here -->
</BaseInput>