Field Labels and Messages
FieldLabel, FieldDescription, and FieldError provide the supporting text and validation treatment used around inputs in the Payload Admin Panel. Use them when a Custom Field needs to match Payload's field structure without rendering one of the complete field components.
Import
Labels
This example places FieldLabel above a native input to show how it fits into a complete Custom Field. Connect the label to its input with htmlFor. When htmlFor is omitted, FieldLabel can derive the matching field ID from path inside Payload's form context.
Descriptions and errors
FieldDescription renders helper text below the control, while FieldError positions validation feedback against the same field. FieldError can receive message and showError directly, or read the current message and submitted state from Payload's form context.
Common props
FieldLabel
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Supplies the translated visible label. |
| | Generated | Associates the label with an input. |
| | — | Generates the input ID when |
| | | Displays Payload's required marker. |
| | | Displays the active locale beside the label. |
| | | Hides the active locale label. |
| | | Changes the rendered element. |
| | | Removes Payload's label presentation. |
FieldDescription
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Supplies translated helper content. |
| | — | Adds the field-specific description class. |
| | — | Adds a custom class. |
| | — | Applies Payload's standard description space. |
FieldError
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Reads validation state for this form path. |
| | Form | Overrides the message from form state. |
| | Form | Forces the validation message to render. |
| | | Positions the validation tooltip caret. |
* An asterisk denotes that a prop is required.
Accessibility
- Associate visible labels with their inputs.
- Use descriptions for guidance, not essential validation errors.
- Keep validation messages specific and explain how to correct the value.
- Preserve
aria-describedbyand error associations when composing a complete custom input.
Provider requirements
These components use Payload's translation context. FieldLabel can also read form, locale, and edit-depth context, while FieldError reads form validation state when explicit values are not supplied. Those providers are already present inside Admin Panel Custom Components.
Was this page helpful?