<CheckboxField {form} label="I agree to the terms" name="agreed" description="You must accept to continue" disabled? bind:checked={$formData.agreed} />

import { Mail } from '@lucide/svelte'; <TextField | TextfieldNullable {form} label="Email" name="email" type="email" placeholder="johndoe@gmail.com" icon={Mail} bind:value={$formData.email} />

import { Lock } from '@lucide/svelte'; <PasswordField {form} label="Password" name="password" icon={Lock} bind:value={$formData.password} />

<PinField {form} label="Verification Code" name="pin" description="Enter the 6-digit code sent to your device" disabled? bind:value={$formData.pin} />

import { MessageSquare } from '@lucide/svelte'; <MessageField {form} label="Message" name="message" placeholder="Enter your message here..." defaultHeight={150} icon={MessageSquare} bind:value={$formData.message} />

<HexColorField {form} label="Color" name="color" bind:value={$formData.color} />

import { Tag } from '@lucide/svelte'; <SelectField {form} label="Select" name="select" items={[1, 2, 3]} getKey={identity} getLabel={(n: number) => (n * 2).toString()} getValue={identity} placeholder="Please select" icon={Tag} bind:value={$formData.select} />

<SelectMultiField {form} label="Select Multi" name="selects" items={[1, 2, 3]} getKey={identity} getLabel={(n: number) => (n * 2).toString()} getValue={identity} placeholder="Please select" bind:value={$formData.selects} />

import { Clock } from '@lucide/svelte'; <TimeField {form} label="Time" name="time" icon={Clock} bind:value={$formData.time} />

import { Calendar } from '@lucide/svelte'; <DateField {form} label="Date" name="date" icon={Calendar} bind:value={$formData.calendarDate} />

<ChoiceField {form} label="Tag" name="tag" items={['svelte', 'sveltekit', 'formsnap', 'shadcn', 'zod']} getKey={item => item} getLabel={item => item} bind:value={$formData.tag} />

<ChoiceMultiField {form} label="Tags" name="tags" items={['svelte', 'sveltekit', 'formsnap', 'shadcn', 'zod']} getKey={item => item} getLabel={item => item} bind:value={$formData.tags} readonly? disabled? />

<WeekdayChoiceField {form} label="Weekday" name="weekday" bind:value={$formData.weekday} readonly? disabled? letterLabels? longLabels? />

<WeekdayChoiceMultiField {form} label="Weekdays" name="weekdays" bind:value={$formData.weekdays} readonly? disabled? letterLabels? longLabels? />