Form Components Showcase

New components use SvelteKit remote forms. Legacy components remain for fields not yet migrated.

New (Remote Forms)

Fields are required by default — a red star shows on the label. Add the optional shorthand to drop the star. When a field has no label the cue moves to the placeholder, which is prefixed with (Required) or (Optional). The “(optional)” examples below use optional.

TextField

A basic text input field

Preview

Standalone (no form) — bind:value + schema + onInput

Minimum 3 characters

value: (empty)

Code

EmailField

An email input field

Preview

Standalone (no form) — bind:value + schema

Invalid email

value: (empty)

Code

PasswordField

A password input field

Preview

Standalone (no form) — bind:value

length: 0

Code

NumberField

A number input field

Preview

Standalone (no form) — bind:value

value: (empty)

Code

DateField

A date input field

Preview

Standalone (no form) — bind:value

value: (empty)

Code

DateRangeField

A start/end date range field

Preview

Standalone (no form) — bind:startValue / bind:endValue

(empty) → (empty)

Code

TimeField

A time input field

Preview

Standalone (no form) — bind:value

value: (empty)

Code

CheckboxField

A checkbox field for boolean values

Preview

You must accept to continue

Toggle to enable

Standalone (no form) — bind:checked + onChange

checkbox: false · switch: false

Code

HexColorField

A hex color picker input

Preview

Standalone (no form) — bind:value

value: (empty)

Code

MessageField

A textarea field with height lock feature

Preview

Standalone (no form) — bind:value + schema

Minimum 10 characters

length: 0

Code

PinField

A 6-digit PIN input for 2FA verification

Preview

Enter the 6-digit code sent to your device

Standalone (no form) — bind:value

value: (empty)

Code

SelectField

A single-select field (wraps ui/Select)

Preview

Standalone (no form) — bind:value + onchange

value: (none)

Code

SliderField

A range slider (single or dual-thumb) styled like the switch

Preview
0

Standalone (no form) — single — bind:value + onChange

25

value: 25

Standalone (no form) — range — bind:value=[low, high]

20 – 80

range: 20 – 80

Code

FileField

A file upload field with button and drag-and-drop variants

Preview
No file chosen
Drag & drop or click to upload No file chosen

Standalone (no form) — onSelect + schema

No file chosen

Select at least one file

selected: (none)

Code

Hidden inputs

Hidden inputs driven by external state; cleared values are skipped (no render error) and changes propagate reactively

Preview

token: abc123
count: 1

Code

Form

A complete form using remote functions with success/error toasts

Preview
Code