Field

Field is Craft-style field layout around a control — label, instructions, errors, warnings, tips, and optional header actions.

Standalone Labels

Control-level label and instructions can live on Input (and similar controls) without wrapping in Field.

Errors and Warnings

Use required, warning, and the errors slot around an invalid control. Tip and instruction values can include inline Markdown.

Translatable

translatable shows the translation icon beside the field label.

Tip

tip renders helper text below the control.

Header End

Trailing header actions go in slot="header-end" — for example a small “Bulk add” button.

API

Slots

Name	Description
label	Field label
instructions	Help text below the label (property values support inline Markdown)
hint	Alias for instructions
header-end	Extra header actions (React headerEnd)
errors	Custom error content (property values support inline Markdown)
warning	Warning message (property values support inline Markdown)
tip	Informational tip below the control (property values support inline Markdown)
(default)	Field control (pk-input, pk-select, etc.)

Props

Name	Description
for	Associates the label with a control id in the light DOM. Type string
instructions	Type string
label	Type string
required	Type boolean Default false
tip	Type string
translatable	Shows the translatable-field icon beside the label. Type boolean Default false
warning	Type string

CSS Parts

Name	Description	CSS selector
control	Control slot wrapper	::part(control)
errors	Errors list	::part(errors)
form-control	Root wrapper	::part(form-control)
header	Field header row	::part(header)
header-end	Trailing header actions	::part(header-end)
instructions	Instructions region	::part(instructions)
label	Label element	::part(label)
tip	Tip region	::part(tip)
warning	Warning region	::part(warning)