# Examples

Example with TailwindCSS. Make sure, that you have add [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms).

#### Create a form

```html
<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

```css
.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:

<figure><img src="/files/qlejetWgYSrOzYoBKHVl" alt="" width="375"><figcaption><p>Screenshot of the result</p></figcaption></figure>

You find more examples at [github repository](https://github.com/tguelcan/topform/tree/master/src/routes/example).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tayfuns-organization.gitbook.io/topform/examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.