Examples

Example with TailwindCSS. Make sure, that you have add @tailwindcss/forms.

Create a form

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

	const formData: FormType = {
		name: 'MyForm',
		title: 'My Form',
		enhance: false,
		attributes: { autocomplete: 'off' },
		elements: [
			{
				name: 'firstName',
				label: { content: 'First Name' },
				field: { type: 'text', placeholder: 'First Name' },
				helper: 'Type your first name here',
				error: 'Firstname is required'
			},
			{
				name: 'lastName',
				label: { content: 'Last Name' },
				field: { type: 'text', placeholder: 'Last Name' },
				helper: 'Type your last name here'
			},
			{
				name: 'email',
				label: { content: 'E-Mail' },
				field: { type: 'email', placeholder: 'Your Mail', required: true }
			},
			{
				name: 'password',
				label: { content: 'Password' },
				field: { type: 'password', placeholder: 'Password' }
			},
			{
				name: 'aggreement',
				label: { content: 'Okay i aggree.' },
				field: { type: 'checkbox' }
			},
			{
				name: 'question',
				label: { content: 'Choose a question' },
				field: {
					type: 'select',
					options: [
						{
							value: 1,
							content: `Where did you go to school?`,
							attributes: {
								disabled: true
							}
						},
						{ value: 2, content: `What is your mother's name?` },
						{
							value: 3,
							content: `What is another personal fact that an attacker could easily find with Google?`
						}
					]
				}
			},
			{
				name: 'selectOne',
				label: { content: 'Select one of this' },
				field: {
					type: 'radio',
					options: [
						{
							value: 'green',
							content: 'Bulbasaur'
						},
						{
							value: 'red',
							content: 'Charmander'
						},
						{
							value: 'blue',
							content: 'Squirtle'
						}
					]
				}
			}
		],
		buttons: [{ name: 'send', type: 'submit', content: 'Send' }]
	};
</script>

<div class="max-w-md mx-auto">
	<Form {formData} />
</div>

Create Classes

.form {
	@apply p-4 border border-gray-100 rounded-lg;
}

.form-title {
	@apply font-bold text-2xl mb-4;
}

.form-field-wrapper {
	@apply flex flex-col mb-4;
}

.form-label {
	@apply block text-sm font-medium leading-6 text-gray-800;
}

.form-input,
.form-select {
	@apply block w-full rounded border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-600 sm:text-sm sm:leading-6;
}

.form-radio-wrapper {
	@apply w-full flex flex-wrap items-center gap-x-2;
}
.form-radio-wrapper > .form-label {
	@apply w-full;
}

.form-checkbox-wrapper {
	@apply flex items-center space-x-2;
}

.form-helper {
	@apply text-gray-900/60 text-xs;
}

.form-error {
	@apply text-red-500 text-xs;
}

.button-wrapper {
	@apply flex justify-end;
}

.form-button {
	@apply flex justify-center rounded-md bg-cyan-600 px-4 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600;
}

Will be create:

Screenshot of the result

You find more examples at github repository.