Forms

Field and Input

Field owns the label, description and error message and hands control props to any input-like child. Input (and Textarea) live under texuli/input.

Validation

Form accepts onValidate returning a field-error map and onSubmitValues when the map is empty. Use fictional @example.com addresses in demos — never real PII.

import { Field, Form, fieldMessage, type FieldErrorMap } from 'texuli/field';
import { Input } from 'texuli/input';

let errors = $state<FieldErrorMap>({});

<Form bind:errors noValidate onValidate={validate} onSubmitValues={save}>
  <Field label="Email" error={fieldMessage(errors, 'email')} required>
    {#snippet children(control)}
      <Input {...control.props} name="email" type="email" bind:value={email} />
    {/snippet}
  </Field>
</Form>

Live form

Submit empty fields to see errors; use a name of two or more characters and an @example.com email to save.