Field

You can use the Field component to render a form field. This component is for simple text, number, email, etc. fields. If you need to render a select, checkbox, radio, etc. you can use the Select, Option, File , etc. components.

The Field component by default renders a text field. You can change the type of the field using the type prop.

Usage

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

<Field name="name" label="Name:" />
<!-- Or -->
<Field name="name" label="Name:">
  This is a custom label
  <svelte:fragment let:show slot="icon">
    <i class="icon">{show ? "👀" : "🙈"}</i>
  </svelte:fragment>
  <svelte:fragment slot="error" let:error>
    {formatError(error)}
  </svelte:fragment>
</Field>

Props

Prop	Type	Default	Description
name	string	-	The name of the field.
label	string | undefined | null	null	The label of the field.
type	"text" | "number" | "checkbox" | "email" | "password" | "tel" | "url" | "search" | "textarea" | undefined	”text”	The type of the field.
context	string	”form”	The context of the form.
id	string | undefined | null	null	The id of the field.
styles	FieldStyles	{}	The styles of the field.
clearOnDestroy	boolean | undefined	false	Clear the field value when the component is destroyed.

Slots

Slot	Prop	Description	Available to
default	-	Customize the label of the field.	all
error	{ error: string | null }	Show an error message.	all
icon	{ show: boolean }	Customize the icons of the field.	password

Events

Name	Type	Description
input	(event: InputEvent) => void	Triggered when the field value changes.
blur	(event: FocusEvent) => void	Triggered when the field loses focus.
focus	(event: FocusEvent) => void	Triggered when the field gains focus.

Text

Example

Name:

Code

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

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

  const schema = {
    name: {
      type: "string",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="name" label="Name:" placeholder="Enter your name" />

Number

Example

Age:

Code

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

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

  const schema = {
    age: {
      type: "number",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="age" label="Age:" placeholder="Enter your age" type="number" />

Checkbox

Example

I accept the terms and conditions

Code

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

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

  const schema = {
    terms: "boolean",
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="terms" label="I accept the terms and conditions" type="checkbox" />

Email

Example

Email:

Code

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

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

  const schema = {
    email: "string",
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="email" label="Email:" placeholder="user@email.com" type="email" />

Password

Example

Password:

Code

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

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

  const schema = {
    password: "string",
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="password" label="Password:" type="password" />

Tel

Example

Phone:

Code

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

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

  const schema = {
    phone: "string",
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="phone" label="Phone:" placeholder="Enter your phone number" type="tel" />

Url

Example

Website:

Code

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

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

  const schema = {
    website: {
      type: "string",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="website" label="Website:" placeholder="https://www.example.com" type="url" />

Search

Example

Search:

Code

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

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

  const schema = {
    search: {
      type: "string",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="search" label="Search:" placeholder="What are you looking for?" type="search" />

Textarea

Example

Description:

Code

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

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

  const schema = {
    description: {
      type: "string",
      required: true,
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });
</script>

<Field name="description" label="Description:" placeholder="Enter a description" type="textarea" />