Getting started

Install dependency

yarn install topform

Simple Example

<script lang="ts">
	import Form from 'topform';
	import type { FormType } from 'topform';

	const formData: FormType = {
		name: 'SignUp',
		title: 'Sign up',
		enhance: false,
		attributes: { 
			autocomplete: 'off', 
			action: '?/register' 
		},
		elements: [
			{
				name: 'name',
				field: { type: 'text', placeholder: 'Name' },
				helper: 'Type your name here'
			},
			{
				name: 'email',
				label: { content: 'Your mail address' },
				field: { type: 'mail', placeholder: 'E-Mail' },
				helper: 'Type your mail here'
			},
			{
				name: 'password',
				label: { content: 'Your password' },
				field: { type: 'password', placeholder: 'Password' },
				helper: 'Very secret password'
			},
		],
		buttons: [
			{ name: 'save', type: 'submit', content: 'Save' }
		]
	};
</script>

<Form {formData} />

If you use the inner: true option, you can wrap your form however you like:

<form method="POST" autocomplete="off" action="?/register" class="form">
    <Form {formData} />
</form>

Svelte renders the following result:

<form method="POST" autocomplete="off" action="?/register" class="form">
   <div class="wrapper">
      <div class="form-field-wrapper">
         <label for="name" class="sr-only">name</label>
         <div class="form-input-wrapper">
            <input id="name" type="text" placeholder="Name" name="name" class="form-input" value="">
         </div>
         <small class="form-helper">Type your name here</small>
      </div>
      <div class="form-field-wrapper s-4UUnfFXl22x1">
         <label for="email" class="form-label">Your mail address</label>
         <div class="form-input-wrapper">
            <input id="email" type="mail" placeholder="E-Mail" name="email" class="form-input" value="">
         </div>
         <small class="form-helper">Type your mail here</small>
      </div>
      <div class="form-field-wrapper">
         <label for="password" class="form-label">Your password</label>
         <div class="form-input-wrapper">
            <input id="password" type="password" placeholder="Password" name="password" class="form-input" value="">
         </div>
         <small class="form-helper">Very secret password</small>
      </div>
      <div class="button-wrapper"><button type="submit" class="form-button">Save</button>
      </div>
   </div>
</form>

What happens if you don't set a label? Topform sets this as sr-only. This class is already included in topform as CSS.

.sr-only means "this content is visible only to screen readers". If you are using the site with working eyes, you don't apply. Try using the site blindfolded which obviously requires using some kind of aids to make it possible; the .sr-only content is meant to aid users without vision. This is called accessibility and within EU it's no longer optional but required by a directive. More information about this topic.

PreviousWelcomeNextOptions

Last updated