Option

The Option component is a field to select an option from a list of options. It can be used to select a single option or multiple options.

Usage

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

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

  const options: OptionItem[] = [
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
    { value: "3", label: "Option 3" },
  ];
</script>

<Option name="name" label="Options" {options} />
<!-- Or -->
<Option name="name" label="Options" {options} >
  This is a custom label
  <span slot="option" let:option>
    Customized option label
    {option.label}
  </span>
  <span slot="content">
    Add some content
  </span>
  <svelte:fragment slot="error" let:error>
    {formatError(error)}
  </svelte:fragment>
</Option>

Props

Prop	Type	Default	Description
name	string	-	The name of the field.
label	string | undefined | null	null	The label of the field.
context	string	”form”	The context of the form.
id	string | undefined | null	null	The id of the field.
multiple	boolean | undefined	false	Enable or disable multiple option.
disabled	boolean | undefined	false	Enable or disable the field.
options	OptionItem[]	[]	The options of the field.
styles	OptionStyles	{}	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
option	{ option: OptionItem; id: string; }	Customize the option of the field.	all
content	{ option: OptionItem; id: string; }	Add some content to the field.	all
error	{ error: string | null }	Show an error message.	all

Events

Name	Type	Description
choose	(option: OptionItem) => void	The event emitted when the user choose or unchoose an option.

Single

Example

Select your hobby:

Swimming Reading Running Cycling Gaming Cooking

Code

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

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

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

  faivform({ fields: schema });

  const options: OptionItem[] = [
    { value: "swimming", label: "Swimming" },
    { value: "reading", label: "Reading" },
    { value: "running", label: "Running" },
    { value: "cycling", label: "Cycling" },
    { value: "gaming", label: "Gaming" },
    { value: "cooking", label: "Cooking" },
  ];
</script>

<Option name="hobby" label="Select your hobby:" {options} />

Multiple

Example

Select your hobbies:

Swimming Reading Running Cycling Gaming Cooking

Code

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

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

  const schema = {
    hobbies: {
      type: "array",
      required: true,
      max: 3,
      item: {
        type: "string",
        required: true,
      },
    },
  } satisfies FieldsSchema;

  faivform({ fields: schema });

  const options: OptionItem[] = [
    { value: "swimming", label: "Swimming" },
    { value: "reading", label: "Reading" },
    { value: "running", label: "Running" },
    { value: "cycling", label: "Cycling" },
    { value: "gaming", label: "Gaming" },
    { value: "cooking", label: "Cooking" },
  ];
</script>

<Option
  name="hobbies"
  label="Select your hobbies:"
  {options}
  multiple
/>

Disabled

Example

Select your hobby:

Swimming Reading Running Cycling Gaming Cooking

Code

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

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

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

  faivform({ fields: schema });

  const options: OptionItem[] = [
    { value: "swimming", label: "Swimming" },
    { value: "reading", label: "Reading" },
    { value: "running", label: "Running" },
    { value: "cycling", label: "Cycling" },
    { value: "gaming", label: "Gaming" },
    { value: "cooking", label: "Cooking" },
  ];
</script>

<Option name="hobby" label="Select your hobby:" {options} disabled />