boredgame/src/lib/components/search/GameSearchForm.svelte

<script lang="ts">
import Checkbox from '$components/ui/checkbox/checkbox.svelte';
import * as Form from '$components/ui/form';
import Input from '$components/ui/input/input.svelte';
import { type SearchSchema, search_schema } from '$lib/zodValidation';
import { type Infer, type SuperValidated, superForm } from 'sveltekit-superforms';
import { zodClient } from 'sveltekit-superforms/adapters';

export let data: SuperValidated<Infer<SearchSchema>>;

const form = superForm(data, {
	validators: zodClient(search_schema),
});

const { form: formData } = form;
</script>

<search>
	<form id="search-form" action="/search" method="GET" data-sveltekit-reload>
		<fieldset>
			<Form.Field {form} name="q">
				<Form.Control let:attrs>
					<Form.Label>Search</Form.Label>
					<Input {...attrs} bind:value={$formData.q} />
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
			<Form.Field {form} name="skip">
				<Form.Control let:attrs>
					<Input type="hidden" />
				</Form.Control>
			</Form.Field>
			<Form.Field {form} name="limit">
				<Form.Control let:attrs>
					<Input type="hidden" />
				</Form.Control>
			</Form.Field>
		</fieldset>
		<fieldset>
			<div class="flex items-center space-x-2">
				<Form.Field {form} name="exact">
					<Form.Control let:attrs>
						<Form.Label>Exact Search</Form.Label>
						<Checkbox {...attrs} class="mt-0" bind:checked={$formData.exact} />
						<input name={attrs.name} value={$formData.exact} hidden />
					</Form.Control>
				</Form.Field>
			</div>
		</fieldset>
		<Form.Button>Submit</Form.Button>
	</form>
</search>

<style lang="postcss">
</style>