Getting started
Install dependency
yarn install topform
npm 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} />
<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.
Last updated