Select

You can use the Select component to render a select input. This component is for single and multiple select inputs.

By default has enabled searchable, clearable and autoselect options.

Usage

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

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

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

<Select name="name" label="Options" {options} />
<!-- Or -->
<Select name="name" label="Options" {options} >
  This is a custom label
  <svelte:fragment let:iten slot="item">
    Customized item
    {item.label}
  </svelte:fragment>
  <i class="icon" slot="remove">🧨</i>
  <i class="icon" slot="clear">🗑</i>
  <i class="icon" slot="arrow">🔽</i>
  <svelte:fragment slot="option" let:option let:selected>
    Customized option
    {option.label}
    {selected && " (selected)"}
  </svelte:fragment>
  <span slot="empty">
    Customized empty
  </span>
  <svelte:fragment slot="error" let:error>
    {formatError(error)}
  </svelte:fragment>
</Select>

Props

Prop	Type	Default	Description
name	string	-	The name of the field.
label	string | undefined | null	null	The label of the field.
placeholder	string | undefined | null	""	The placeholder of the field.
context	string	”form”	The context of the form.
id	string | undefined | null	null	The id of the field.
autoselect	boolean | undefined	true	Enable or disable the autoselect option.
searchable	boolean | undefined	true	Enable or disable the searchable option.
clearable	boolean | undefined	true	Enable or disable the clearable action.
multiple	boolean | undefined	false	Enable or disable multiple select.
disabled	boolean | undefined	false	Enable or disable the field.
options	SelectOption[]	[]	The options of the field.
styles	SelectStyles	{}	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
item	{ item: SelectOption }	Customize the item selected.	multiple
remove	-	Customize the remove icon.	multiple
clear	-	Customize the clear icon.	all
arrow	-	Customize the arrow icon.	all
option	{ option: SelectOption; selected: boolean; }	Customize the option of the field.	all
empty	-	Customize the empty message.	all
error	{ error: string | null }	Show an error message.	all

Events

Name	Type	Description
choose	(option: SelectOption) => void	The event emitted when the user selects an option.
remove	(option: SelectOption) => void	The event emitted when the user removes an item.
clear	() => void	The event emitted when the user clears the field.

Single

Example

Tool:

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tool"
  label="Tool:"
  placeholder="Choose a tool"
  {options}
/>

Multiple

Example

Tools:

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tools"
  label="Tools:"
  placeholder="Choose tools"
  {options}
  multiple
/>

Fixed options

Example

Tools:

Svelte FaivForm

• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte", fixed: true },
    { value: "faivform", label: "FaivForm", fixed: true },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tools"
  label="Tools:"
  placeholder="Choose tools"
  {options}
  multiple
/>

Non searchable

Example

Tool:

Choose a tool

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tool"
  label="Tool:"
  placeholder="Choose a tool"
  {options}
  searchable={false}
/>

Multiple non searchable

Example

Tools:

Choose tools

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tools"
  label="Tools:"
  placeholder="Choose tools"
  {options}
  multiple
  searchable={false}
/>

Non clearable

Example

Tool:

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tool"
  label="Tool:"
  placeholder="Choose a tool"
  {options}
  clearable={false}
/>

Disabled

Example

Tool:

• Svelte
• FaivForm
• Astro
• Starlight
• Vite
• SvelteKit

Code

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

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

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

  faivform({ fields: schema });

  const options: SelectOption[] = [
    { value: "svelte", label: "Svelte" },
    { value: "faivform", label: "FaivForm" },
    { value: "astro", label: "Astro" },
    { value: "starlight", label: "Starlight" },
    { value: "vite", label: "Vite" },
    { value: "sveltekit", label: "SvelteKit" },
  ];
</script>

<Select
  name="tool"
  label="Tool:"
  placeholder="Choose a tool"
  {options}
  disabled
/>