Forms

Build on native form semantics

Fractalsvelte form controls render native inputs, selects, and checkboxes. Give each control a name, associate it with a Field, and let the browser and SvelteKit handle submission.

<script lang="ts">
	import { Button, Checkbox, Field, Input, NativeSelect } from 'fractalsvelte';

	let email = $state('');
	let plan = $state('starter');
	let acceptedTerms = $state(false);
</script>

<form method="POST" class="box gap16">
	<Field label="Email" for="email" description="We only use this for account updates.">
		<Input id="email" bind:value={email} name="email" type="email" />
	</Field>

	<Field label="Plan" for="plan">
		<NativeSelect
			id="plan"
			bind:value={plan}
			name="plan"
			options={[
				{ value: 'starter', label: 'Starter' },
				{ value: 'team', label: 'Team' }
			]}
		/>
	</Field>

	<Field label="Terms" for="terms" orientation="horizontal">
		<Checkbox id="terms" bind:checked={acceptedTerms} name="terms" />
	</Field>

	<Button type="submit">Create account</Button>
</form>

Surface validation feedback

Field accepts an error string and renders it with role="alert". Keep validation ownership in your application and pass the resulting message to the field.

<Field label="Email" for="email" error={form?.emailError}>
	<Input id="email" name="email" value={form?.email ?? ''} type="email" />
</Field>

Choose your validation layer

Fractalsvelte does not prescribe a schema or form-state library. Use browser constraints for simple forms, SvelteKit form actions for server-side validation, or the validation library your application already uses. This keeps the visual controls separate from transport and data rules.

For SvelteKit forms, use method="POST" with a +page.server.ts action. Add use:enhance only when you want progressive client-side behavior; the controls themselves do not require JavaScript to submit.

Form-related components

Use the component pages for the full props and demos of:

• Field for labels, descriptions, errors, and vertical or horizontal layout.
• Input, Textarea, Checkbox, Switch, Slider, and RadioGroup for direct input.
• Select, NativeSelect, and Combobox for choosing from options.
• InputGroup for visually combined inputs and controls.