Tiptap Input

TiptapInput provides a compact inline rich-text field. It is useful for subjects, placeholders, formulas, and other short authoring surfaces.

Plain Input

Use TiptapInput as a compact rich-text capable inline authoring field.

States

Use invalid, disabled, and read-only states when the input participates in form validation or locked settings.

Variable Tag Indicators

Variable tags display the applied transform as a badge and an orange corner when a default value is set. Pass variableTransformerRegistry, grouped by value type, to display transform names. Unknown transforms display their saved ID.

const input = document.querySelector('pk-tiptap-input');
input.variableTransformerRegistry = {
    string: [{ id: 'kebab', label: 'Kebab Case' }],
};

API

Attributes & Properties

Name	Description
customError custom-error	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue value	Type string | null
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
fitCell fit-cell	Flush + fill parent cell (editable tables). Type boolean Default false
invalid	Type boolean Default false
name	Name submitted with form data. Type string | null Default null
readonly	Type boolean Default false
required	Marks the control as required for form submission. Type boolean Default false
variableCategories	Variable options used to resolve chip labels when hydrating from {token} strings. Without this, saved field tokens fall back to UID title-casing after reload. Type PkTiptapVariableCategories Default {}
variableTagConfigure	Formie / React configure bridge — called when a chip is activated for editing. Prefer this over listening for pk-variable-tag-configure from React. Type ((detail: import('./variable-tag-node-view.js').PkVariableTagConfigureDetail) => void) | null Default null
variableTransformerRegistry	Transform names displayed as badges on configured variable tags. Type PkVariableTransformerRegistry Default {}

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
change	—
input	—
pk-change	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)