Skip to content
5Form

Built-in

This library comes with a set of components that you can use to build your own forms. These components are built using the same API that you have access to, so you can use them as a reference for your own components.

Here is a simple overview of the components that come with this library:

Field

The most basic component, usefull for inputs like text, number, email, etc.

<script>
  import { Field } from '@tuentyfaiv/svelte-form';
</script>


<Field name="name" label="Name" />

Select

Usefull for select inputs, it can be single or multiple.

<script>
  import { Select } from '@tuentyfaiv/svelte-form';


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


<Select name="number" label="Name" {options} />

Option

Usefull for radio input for single options or checkbox for multiple options.

<script>
  import { Option } from '@tuentyfaiv/svelte-form';


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


<Option name="type" label="Name" {options} />

File

Usefull for file inputs, it can be single or multiple and dropzone is supported.

<script>
  import { File } from '@tuentyfaiv/svelte-form';
</script>


<File name="file" />

Errors

Usefull for displaying errors from the form.

<script>
  import { Errors } from '@tuentyfaiv/svelte-form';
</script>


<Errors />

Comming soon

  • Color

    Usefull for color inputs.

  • Date

    Usefull for date, datetime-local, month, time and week inputs.

  • Date

    Usefull for date range inputs.

  • Range

    Usefull for range inputs.