Blackwork

Field

Arrange labels, descriptions, and validation messages around an input, with or without a form library.

Field

Use Field to keep a control, its label, supporting text, and validation message in one accessible layout. It does not store values or submit forms.

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 to manage field values, validation, and submission with TanStack Form.

Usage

Preview

Used for sign-in and notices.

Examples

Horizontal

Horizontal

Validation

When validation fails, mark the field with data-invalid on Field and set aria-invalid on the input. Connect the message through the field components so assistive technology receives the same error context.

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 handles layout. The app or form library manages values and submission.
  • Pair FieldLabel htmlFor with the control id.