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.
Option
<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>
string
string | undefined | null
null
boolean | undefined
false
OptionItem
[]
OptionStyles
{}
{ option:
; id: string; }
{ error: string | null }
(option:
) => void
<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} />
<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/>
<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 />