Core package

Here you can find a list of interfaces and types used in the core package.

Note

Type Data is mentioned in the documentation. It is a generic type that can be used to define the type of the data that is passed to the form.

Global

All types and interfaces that you have to know to use the useConfig, and the faivform contexts.

ContextForm

A wrapper type of Readable<FaivFormStore> that defines the form context.

Definition

Property	Type	Description
loading	Writable<boolean>	Whether the form is loading or not.
errors	Writable<Errors<Data>>	The errors of the fields.
data	Writable<Data>	The values of the fields.
styles	Writable<ContextStyles>	The styles of the form.
reset	(clear?: boolean, starting?: Data) => void	Resets the form.
setError	(field: Keys, error?: string | null) => Promise<void>	Sets the error of a field.
setField	(field: Keys, value: Data[Keys], validate?: boolean) => Promise<void>	Sets the value of a field.
check	(event: UserEvent<HTMLInputElement | HTMLTextAreaElement, FocusEvent | Event>) => Promise<void>	Checks the value of a field.
submit	submit<T = Data>(action: SubmitAction<T>, config?: SubmitConfig<T>) => Submit`	Submits the form.

Usage

<script lang="ts">
  import { useForm } from "@tuentyfaiv/svelte-form";

  import type { ContextForm } from "@tuentyfaiv/svelte-form";

  const form: ContextForm<Data> = useForm("myform");
</script>

ContextStyles

An interface that defines the field styles.

Definition

Property	Type	Description
replace	boolean | undefined	Whether the styles should replace the default styles or not.
field	FieldStyles | undefined	The styles of the Field.
select	SelectStyles | undefined	The styles of the Select.
option	OptionStyles | undefined	The styles of the Option.
file	FileStyles | undefined	The styles of the File.
errors	ErrorsStyles | undefined	The styles of the Errors.

Usage

<script lang="ts">
  import { useConfig, faivform, Field } from "@tuentyfaiv/svelte-form";
  import type { ContextStyles } from "@tuentyfaiv/svelte-form";

  const styles: ContextStyles = {
    // ... styles
  };

  // in root app
  useConfig(styles);
  // or in component
  const form = faivform({
    // ...config
    styles,
  });
</script>

// or pass directly
<Field name="some-field" {styles} />

Faivform

All types and interfaces that you have to know to use the core package.

FaivFormConfig

An interface that defines the config of the form.

Properties

Property	Type	Description
fields	FieldsSchema | Adapter	The fields of the form.
styles	ContextStyles | undefined	The styles of the form.
context	string | undefined	The context of the form.

Usage

<script lang="ts">
  import { faivform } from "@tuentyfaiv/svelte-form";

  import type { FaivFormConfig } from "@tuentyfaiv/svelte-form";

  const config: FaivFormConfig = {
    // ... config
  };

  const form = faivform(config);
</script>

FaivFormStore

An interface that defines the store of the form.

Properties

Property	Type	Description
loading	Writable<boolean>	Whether the form is loading or not.
errors	Writable<Errors<Data>>	The errors of the fields.
data	Writable<Data>	The values of the fields.
styles	Writable<ContextStyles>	The styles of the form.
reset	(clear?: boolean, starting?: Data) => void	Resets the form.
setError	(field: Keys, error?: string | null) => Promise<void>	Sets the error of a field.
setField	(field: Keys, value: Data[Keys], validate?: boolean) => Promise<void>	Sets the value of a field.
check	(event: UserEvent<HTMLInputElement | HTMLTextAreaElement, FocusEvent | Event>) => Promise<void>	Checks the value of a field.
submit	submit<T = Data>(action: SubmitAction<T>, config?: SubmitConfig<T>) => Submit`	Submits the form.

Usage

<script lang="ts">
  import { faivform } from "@tuentyfaiv/svelte-form";

  import type { Readable } from "svelte/store";
  import type { FaivFormStore } from "@tuentyfaiv/svelte-form";

  const form: Readable<FaivFormStore<Data>> = faivform({
    // ... config
  });
  const { ...methodsAndStores } = $form;
</script>

Adapter

An abstract class that defines the methods that an adapter must implement.

Definition

Method	Description
initial(): { fields: Data; errors: Errors<Data>; }	Returns the initial values of the fields and errors.
validate<T = Data>(data: T): Promise<void>	Validates the data.
field(field: keyof Data, value: Data[keyof Data], errors: Writable<Errors<Data>>): Promise<void>	Validates a field.
errors(error: unknown, errors: Writable<Errors<Data>>, handle?: (error: unknown) => (void | Promise<void>)): Promise<void>	Handles an error.

Usage

import { Adapter } from "@tuentyfaiv/svelte-form";

class MyAdapter extends Adapter {
  // ... implementation
}

SubmitAction

An type that defines the submit action.

Properties

Property	Type	Description
values	Data	The values of the form.

Usage

import type { SubmitAction } from "@tuentyfaiv/svelte-form";

const submitAction: SubmitAction<Data> = async (values) => {
  // ... do something with the values
}

SubmitConfig

An interface that defines the submit config.

Properties

Property	Type	Description
error	((error: unknown) => (void | Promise<void>)) | undefined	A function that handles the error.
finish	VoidFunction | undefined	A function that is called when the submit action is finished whether it was successful or not.
reset	boolean | undefined	Whether the form should be reset or not.
initial	Data | undefined	The initial values of the form.

Usage

import type { SubmitConfig } from "@tuentyfaiv/svelte-form";

const submitConfig: SubmitConfig<Data> = {
  // ... config
}

Submit

An type that defines the function that is called when the form is submitted.

Definition

Property	Type	Description
event	UserEvent<HTMLFormElement, SubmitEvent>	The submit event.

Usage

<script lang="ts">
  import { faivform } from "@tuentyfaiv/svelte-form";

  import type { Submit } from "@tuentyfaiv/svelte-form";

  const form = faivform({
    fields: // ... schema or adapter
  });

  const handleSubmit: Submit = $form.submit(async (values) => {
    // ... do something with the values
  });
</script>

<form on:submit={handleSubmit}>
  <!-- ... Fields -->
</form>

UserEvent

An object type that defines the user event. It extends the native event to safely access the current target.

Definition

Property	Type	Description
currentTarget	EventTarget & Element	The current target of the event.
…	Event	All the properties of the event used.

Usage

import type { UserEvent } from "@tuentyfaiv/svelte-form";

function handleEvent(event: UserEvent<HTMLInputElement>) {
  // ... do something with the current target
}

Errors

An object type that defines the errors of the fields.

Definition

Property	Type	Description
[field]	string | null	The error of a field.

Usage

import type { Errors } from "@tuentyfaiv/svelte-form";

const errors: Errors<Data> = {
  // ... errors
};

Schemas

All schemas are defined using TypeScript types. This means that you can use them to define the type of your data.

FieldsSchema

A object type that defines a schema for a set of fields.

Definition

Property	Type	Description
[field]	Schema | FieldPropSchema | ArraySchema | FieldsSchema	A field schema.

Usage

import type { FieldsSchema } from "@tuentyfaiv/svelte-form";

const schema = {
  // ... fields
} satisfies FieldsSchema;

Schema

A type that defines the type of a field.

Definition

Value	Description
RegExp	A regular expression.
"string"	A string.
"number"	A number.
"boolean"	A boolean.
"date"	A date.
"file"	A file.

Usage

import type { Schema } from "@tuentyfaiv/svelte-form";

const fieldSchema: Schema = "string";

FieldPropSchema

A object type that defines the type of a field.

Definition

Property	Type	Description
type	Schema	The type of the field.
required	boolean | undefined	Whether the field is required or not.
min	number | undefined	The minimum value of the field.
max	number | undefined	The maximum value of the field.

Usage

import type { FieldPropSchema } from "@tuentyfaiv/svelte-form";

const fieldSchema: FieldPropSchema = {
  type: "string",
  required: true,
  min: 5,
  max: 10,
};

ArraySchema

A object type that defines the type of an array.

Definition

Property	Type	Description
type	"array"	Indicates that the field is an array.
item	Schema | FieldPropSchema | ArraySchema | FieldsSchema	The type of the items in the array.
required	boolean | undefined	Whether the array is required or not.
min	number | undefined	The minimum length of the array.
max	number | undefined	The maximum length of the array.

Usage

import type { ArraySchema } from "@tuentyfaiv/svelte-form";

const arraySchema: ArraySchema = {
  type: "array",
  item: "string",
  required: true,
  min: 5,
  max: 10,
};

Styles

All types and interfaces that you have to know to use the styles.

FieldStyles

An interface that defines the field styles.

Definition

Property	Type	Description
container	string | undefined	Field container class
label	string | undefined	Field label class
input	string | undefined	Field input class
area	string | undefined	Field type textarea class
check	string | undefined	Field type checkbox class
action	string | undefined	Field type password action class
icon	string | undefined	Field type password icon class
checked	string | undefined	Field type checkbox checked icon
error	string | undefined	Field error class

Usage

import type { FieldStyles } from "@tuentyfaiv/svelte-form";

const styles: FieldStyles = {
  // ... styles
};

SelectStyles

An interface that defines the select styles.

Definition

Property	Type	Description
container	string | undefined	Select container class
label	string | undefined	Select label class
select	string | undefined	Select menu class
value	string | undefined	Select value class
item	string | undefined	Select item class
remove	string | undefined	Select remove class
searchable	string | undefined	Select searchable class
nonsearchable	string | undefined	Select nonsearchable class
clear	string | undefined	Select clear class
arrow	string | undefined	Select arrow class
icon	string | undefined	Select icon class
options	string | undefined	Select options class
option	string | undefined	Select option class
empty	string | undefined	Select empty class
error	string | undefined	Select error class

Usage

import type { SelectStyles } from "@tuentyfaiv/svelte-form";

const styles: SelectStyles = {
  // ... styles
};

OptionStyles

An interface that defines the option styles.

Definition

Property	Type	Description
container	string | undefined	Options container class
legend	string | undefined	Options label class
option	string | undefined	Option class
label	string | undefined	Option label class
input	string | undefined	Option input class
content	string | undefined	Option content class
error	string | undefined	Option error class

Usage

import type { OptionStyles } from "@tuentyfaiv/svelte-form";

const styles: OptionStyles = {
  // ... styles
};

FileStyles

An interface that defines the file styles.

Definition

Property	Type	Description
container	string | undefined	File container class
item	string | undefined	File item class
cover	string | undefined	File cover class
remove	string | undefined	File remove class
items	string | undefined	File items class
retry	string | undefined	File retry class
content	string | undefined	File content class
label	string | undefined	File label class
input	string | undefined	File input class
error	string | undefined	File error class

Usage

import type { FileStyles } from "@tuentyfaiv/svelte-form";

const styles: FileStyles = {
  // ... styles
};

ErrorsStyles

An interface that defines the errors styles.

Definition

Property	Type	Description
container	string | undefined	Errors list class
item	string | undefined	Errors item class

Usage

import type { ErrorsStyles } from "@tuentyfaiv/svelte-form";

const styles: ErrorsStyles = {
  // ... styles
};

Built-in components

All types and interfaces that you have to know to use the built-in components.

SelectOption

An interface that defines the select option.

Definition

Property	Type	Description
key	string | undefined	The key of the option.
label	string	The label of the option.
value	string	The value of the option.
fixed	boolean | undefined	Whether the option is fixed or not.
disabled	boolean | undefined	Whether the option is disabled or not.

Usage

import type { SelectOption } from "@tuentyfaiv/svelte-form";

const options: SelectOption[] = [
  // ... options list
];

OptionItem

An interface that defines the option item.

Definition

Property	Type	Description
key	string | undefined	The key of the option.
label	string | undefined	The label of the option.
value	string	The value of the option.
disabled	boolean | undefined	Whether the option is disabled or not.

Usage

import type { OptionItem } from "@tuentyfaiv/svelte-form";

const options: OptionItem[] = [
  // ... options list
];