Function useForm

useForm<T extends Record<string, unknown>, State = void>(
ctx: WidgetContext<State>,
options: UseFormOptions<T>,
): UseFormReturn<T>

Form management hook for Rezi widgets.

Provides comprehensive form state management including:

Field value tracking
Touched/dirty state
Sync and async validation
Form submission handling

Type Parameters

T extends Record<string, unknown>
State = void

Parameters

ctx: WidgetContext<State>
Widget context from defineWidget render function
options: UseFormOptions<T>
Form configuration options

Returns UseFormReturn<T>

Form state and control methods

Example

const LoginForm = defineWidget<{ onLogin: (u: string, p: string) => void }>(
  (props, ctx) => {
    const form = useForm(ctx, {
      initialValues: { username: "", password: "" },
      validate: (v) => {
        const errors: Record<string, string> = {};
        if (!v.username) errors.username = "Required";
        if (v.password.length < 8) errors.password = "Min 8 chars";
        return errors;
      },
      onSubmit: (v) => props.onLogin(v.username, v.password),
    });

    return ui.column([
      ui.input({
        id: ctx.id("username"),
        value: form.values.username,
        onInput: form.handleChange("username"),
        onBlur: form.handleBlur("username"),
      }),
      // ...
    ]);
  }
);