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.

Config

Definition

Property	Type	Description
fields	ContextStyles | undefined	Global built-in componets styles.
base	FaivBaseTheme | undefined	Global base CSS variables shared between light and dark themes.
light	FaivFormTheme | undefined	Global light theme.
dark	FaivFormTheme | undefined	Global dark theme.
onLight	FaivCSSVars | undefined	Global faivform CSS variables for light theme.
onDark	FaivCSSVars | undefined	Global faivform CSS variables for dark theme.

Usage

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

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

  const config: Config = {
    fields: {
      // ... styles
    },
    vars: {
      // ... vars
    },
  };

  setConfig(config);
</script>

ContextForm

An interface 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.

Usage

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

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

  const form: ContextForm = 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.
icons	Icons | null | undefined	The icons of the form.

Usage

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

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

FaivBaseTheme

An interface that defines the base theme.

Definition

Property	Type	Description
font	string | undefined	The font family of the fields.
space	string | undefined	The space of the fields.
radius	string | undefined	The border radius of the fields.
white	string | undefined	White color used in the fields.
black	string | undefined	Black color used in the fields.

Usage

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

const base: FaivBaseTheme = {
  // ... base
};

FaivFormTheme

An type that defines the faivform theme.

Definition

Property	Type	Description
primary	FaivFormThemePalette | undefined	The primary theme.
secondary	FaivFormThemePalette | undefined	The secondary theme.
accent	FaivFormThemePalette | undefined	The accent theme.
error	FaivFormThemePalette | undefined	The error theme.
warning	FaivFormThemePalette | undefined	The warning theme.
success	FaivFormThemePalette | undefined	The success theme.
placeholder	FaivFormThemePalette | undefined	The placeholder theme.

Usage

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

const theme: FaivFormTheme = {
  // ... theme
};

FaivFormThemePalette

A type that defines the faivform theme palette.

Definition

Property	Type	Description
50	string | undefined	The 50 color of the theme.
100	string | undefined	The 100 color of the theme.
200	string | undefined	The 200 color of the theme.
300	string | undefined	The 300 color of the theme.
400	string | undefined	The 400 color of the theme.
500	string | undefined	The 500 color of the theme.
600	string | undefined	The 600 color of the theme.
700	string | undefined	The 700 color of the theme.
800	string | undefined	The 800 color of the theme.
900	string | undefined	The 900 color of the theme.

Usage

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

const palette: FaivFormThemePalette = {
  // ... palette
};

FaivCSSVars

A type that defines the faivform CSS variables.

Definition

Property	Type	Description
primary	FaivColorVars | undefined	The primary CSS vars.
secondary	FaivColorVars | undefined	The secondary CSS vars.
accent	FaivColorVars | undefined	The accent CSS vars.
error	FaivColorVars | undefined	The error CSS vars.
warning	FaivColorVars | undefined	The warning CSS vars.
success	FaivColorVars | undefined	The success CSS vars.
placeholder	FaivColorVars | undefined	The placeholder CSS vars.
shadow	FaivShadowVars | undefined	The shadow CSS vars.
border	FaivBorderVars | undefined	The border CSS vars.

Usage

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

const vars: FaivCSSVars = {
  // ... vars
};

FaivColorVars

An interface that defines the faivform color CSS variables.

Definition

Property	Type	Description
color	string | undefined	The color CSS variable.
opacity	string | undefined	The opacity CSS variable.
text	string | undefined	The text color CSS variable.
“text-opacity”	string | undefined	The text color opacity CSS variable.
font	string | undefined	The font CSS variable.

Usage

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

const color: FaivColorVars = {
  // ... color
};

FaivShadowVars

An interface that defines the faivform shadow CSS variables.

Definition

Property	Type	Description
base	string | undefined	The shadow CSS variable.
size	string | undefined	The size CSS variable.
color	string | undefined	The color CSS variable.
opacity	string | undefined	The opacity color CSS variable.

Usage

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

const shadow: FaivShadowVars = {
  // ... shadow
};

FaivBorderVars

An interface that defines the faivform border CSS variables.

Definition

Property	Type	Description
base	string | undefined	The border CSS variable.
width	string | undefined	The width CSS variable.
style	string | undefined	The style CSS variable.
color	string | undefined	The color CSS variable.
opacity	string | undefined	The opacity color CSS variable.

Usage

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

const border: FaivBorderVars = {
  // ... border
};

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

This contains all the properties of the ContextForm interface and the following:

Property	Type	Description
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
  });
</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
error	string | undefined	Field error 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
hide	string | undefined	Field type password hide icon.
show	string | undefined	Field type password show icon.

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 select 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
error	string | undefined	Select error class
clear	string | undefined	Select clear class
arrow	string | undefined	Select arrow icon
icon	string | undefined	Select icon class
options	string | undefined	Select options class
option	string | undefined	Select option class
empty	string | undefined	Select empty 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
};

Icons

An interface that defines the icons of the fields.

Definition

Property	Type	Description
checked	string | undefined	The icon of the checkbox.
hide	string | undefined	The icon of the password when it is hidden.
show	string | undefined	The icon of the password when it is shown.
clear	string | undefined	The icon of the clear button.
arrow	string | undefined	The icon of the arrow.
remove	string | undefined	The icon of the remove button.
retry	string | undefined	The icon of the retry button.

Usage

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

const icons: Icons = {
  // ... icons
};

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
];