Blackwork
Scroll to top

Field

Label, description, and layout for a single control. No form library required.

Field

When to use

  • Any labeled input, even outside a form library
  • Horizontal settings rows
  • Showing a description or a validation message next to the control

Use Form when the field needs TanStack Form state and submit.

Usage

Preview

Used for sign-in and notices.

Examples

Horizontal

Horizontal

Validation

Put data-invalid on Field and aria-invalid on the control.

Validation

At least 3 characters.

API Reference

PropTypeDefaultDescription
orientation"vertical" | "horizontal" | "responsive""vertical"Layout of the label and control. Set on Field.
htmlForstring—Associates FieldLabel with the control id.
data-invalidboolean—Marks the Field as invalid. Pair with aria-invalid on the control.

Notes

  • Field is layout only. It does not own value or submit.
  • Pair FieldLabel htmlFor with the control id.