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} >
  Custom label, Options
  <img src="/icon-clear.svg" alt="clear options" slot="clear" />
  <img src="/icon-arrow.svg" alt="show/hide options" slot="arrow" />
  <p slot="option" let:option>
    Customized option
    {option.label}
  </p>
  <span slot="empty">
    Customized empty
  </span>
  <span slot="error" let:error>
    {formatError(error)}
  </span>
</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.
datas	Record<string, string | boolean | number> | undefined	{}	Datasets of the field container.

Slots

Slot	Prop	Description	Available to
default	-	Customize the label of the field.	all
clear	-	Customize the clear action.	all
arrow	-	Customize the arrow action.	all
item	{ item: SelectOption }	Customize the item selected.	multiple
remove	-	Customize the item remove action.	multiple
option	{ option: SelectOption }	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	CustomEvent<SelectOption>	The event emitted when the user selects an option.
remove	CustomEvent<SelectOption>	The event emitted when the user removes an item.
clear	CustomEvent<void>	The event emitted when the user clears the field.

Single

Example

Tool:

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:

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

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

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

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:

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:

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
/>