BindableValue

BindableValue composes variable or token binding with fields without coupling the field to a specific editor store. Applications supply a BindingProvider; NumberField consumes the context automatically when nested beneath BindableValueRoot.

Detach on edit

16

Read-only bound

24

Edit variable

16

Mixed bindings

mixed

Anatomy

• BindableValueRoot — binding state, policy, resolved value, picker state, and actions
• BindableValueTrigger — polymorphic bind-picker trigger
• BindableValuePicker — renderless Reka Combobox composition

Policies

• detach-on-edit unbinds targets on the first value mutation and keeps the complete interaction in one provider undo batch.
• readonly-when-bound blocks field editing, scrubbing, and keyboard stepping.
• edit-variable sends changes to provider.setValue() instead of changing the target value.

Focusing a bound NumberField or opening its picker is non-destructive. The policy starts only when the user types a changed draft, steps the value, or crosses the pointer-scrub threshold. Committing an unchanged field creates no undo entry. Cancellation rolls back an open provider batch. Providers without undo support still receive binding changes, with binding snapshots restored where possible.

Provider example

import type { BindingProvider, BindingTarget } from '@open-pencil/vue'

const values = new Map<string, number>([['spacing/md', 16]])
const bindings = new Map<string, string>()

const provider: BindingProvider<number> = {
  listVariables: () => [],
  filterVariables: () => [],
  getBound: () => undefined,
  getState: () => 'unbound',
  resolve: id => values.get(id),
  bind: (target: BindingTarget, variableId) => {
    bindings.set(`${target.nodeId}:${target.path}`, variableId)
  },
  unbind: (target: BindingTarget) => {
    bindings.delete(`${target.nodeId}:${target.path}`)
  }
}

Generated API reference

The following tables are extracted from the Vue source and JSDoc during the documentation build.

BindableValueRoot

Generated from packages/vue/src/primitives/BindableValue/BindableValueRoot.vue

Props

Prop	Default	Type
provider Binding implementation. Falls back to the nearest injected provider.	—	BindingProvider<V> | undefined
targets* Node/property pairs participating in this binding.	—	BindingTarget[]
value* Direct field value used when the targets are not consistently bound.	—	V
policy Behavior when a consistently bound field is edited.	—	BoundEditPolicy | undefined
batchLabel Undo label for a field interaction transaction.	"Edit bound value"	string | undefined

Slots

Slot	Props	Description
default Complete render contract for binding-aware controls.	BindableValueSlotProps<V>	Complete render contract for binding-aware controls.

BindableValueTrigger

Generated from packages/vue/src/primitives/BindableValue/BindableValueTrigger.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"button"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{ state: BindingState; variable: Variable | undefined; resolvedValue: unknown; policy: BoundEditPolicy; open: boolean; searchTerm: string; variables: Variable[]; stateAttrs: BindableValueStateAttrs; actions: BindableValueActions<unknown>; }

BindableValuePicker

Generated from packages/vue/src/primitives/BindableValue/BindableValuePicker.vue

Slots

Slot	Props	Description
default	{ state: BindingState; variable: Variable | undefined; resolvedValue: unknown; policy: BoundEditPolicy; open: boolean; searchTerm: string; variables: Variable[]; stateAttrs: BindableValueStateAttrs; actions: BindableValueActions<unknown>; }