Blackwork

Form

Manage Blackwork form values, validation, and submission with TanStack Form.

Form

Use blackwork/form when a form needs managed values, validation, and submission. Use Field alone when the application already owns that state.

blackwork/form combines TanStack Form state management with Blackwork field components. TanStack Form handles values, validation, and submission; Blackwork provides field styles and bindings for common controls.

Install the required TanStack Form dependency first:

Bash
pnpm add @tanstack/react-form

When to use

  • Forms that need values, validation, and submission
  • Reuse TextField, TextareaField, or CheckboxField

For an input that only needs a label and description, use Field.

Usage

Usage

Examples

Built-in fields

Built-in fields

Optional. Shown on your public profile.

Custom field

Select, Combobox, and other controls need manual field bindings. The input example below shows how to connect a control inside form.AppField using Field.

Custom field

API Reference

PropTypeDefaultDescription
formrequired{ handleSubmit: () => unknown }—Form instance from useAppForm. Required on Form.
labelrequiredReactNode—Visible label on TextField, TextareaField, and CheckboxField.
descriptionReactNode—Help text rendered under the control.

Notes

  • Form calls form.handleSubmit() when submitted.
  • SubmitButton sets the Button loading state from isSubmitting.
  • Keep validation close to the field that owns it; use form-level validation for rules that depend on multiple values.