FormField

Use a TypeScript application with a CSS-capable bundler. Install @blukavantui/community@1.1.0 from npm, or install the matching downloaded archive.

// In your test application’s package.json dependencies:
"@blukavantui/community": "1.1.0"

Run npm install in that test application to install the component package. Load the theme once and the component stylesheet shown in the adapter. Create an empty host in your view:

<div id="example"></div>

This reusable adapter follows the Button and TimePicker guide pattern. Its types come from the factory, so required options stay required. Attach the host first; mount once per view and retain the handle.

import { createFormField } from '@blukavantui/community/form-field'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/form-field.css'

type Options = NonNullable<Parameters<typeof createFormField>[1]>

export function mount(host: HTMLElement, options: Options) {
  const instance = createFormField(host, options)
  return { instance, update: (patch: Partial<Options>) => instance.update(patch), destroy: () => instance.destroy() }
}

FormField owns the label, help/error presentation and ARIA association around your control. Your application owns its value, events, native constraints and listeners. There is no getValue(), validate() or Change callback on FormField.

Set name, required, disabled and readOnly directly on the consumer input. Pass Control at mount, and remove your own listeners during disposal.

Use: Control, Label, Description, Required

Create the input, put its own Name/required/disabled/readOnly constraints on it, and pass it as Control. FormField adds the label, help/error text and ARIA association. It has no value or change callback.

Use: Error, update, destroy

Set native custom validity on the input yourself; FormField Error only presents the message and ARIA state. On removal, detach your listeners and destroy the field. Its original id and owned ARIA attributes are restored; it does not restore the input’s previous DOM parent.

Save this as form-field.ts, import its mount function and pass your attached host. It includes application state, interactive controls and a destroy handler.

Download the editable TypeScript example ↓

import { createFormField } from '@blukavantui/community/form-field'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/form-field.css'

export function mount(host: HTMLElement) {
  const root = document.createElement('section')
  const target = document.createElement('div')
  const check = document.createElement('button')
  check.type = 'button'; check.textContent = 'Validate reference'
  const status = document.createElement('p'); status.setAttribute('role', 'status')
  const input = document.createElement('input')
  input.type = 'text'; input.name = 'reference'; input.required = true
  input.className = 'blu-input'
  const existingHelp = document.createElement('p')
  existingHelp.id = `reference-help-${crypto.randomUUID()}`
  existingHelp.textContent = 'Use your customer reference.'
  input.setAttribute('aria-describedby', existingHelp.id)
  root.append(target, existingHelp, check, status); host.append(root)
  const instance = createFormField(target, {
    Control: input, Label: 'Customer reference', Required: true,
    Description: 'At least three characters, for example ABC.',
  })
  const listeners = new AbortController()
  input.addEventListener('input', () => {
    input.setCustomValidity(''); instance.update({ Error: '' })
    status.textContent = `Draft: ${input.value}`
  }, { signal: listeners.signal })
  check.addEventListener('click', () => {
    const error = input.value.trim().length < 3 ? 'Enter at least three characters.' : ''
    // FormField supplies presentation/ARIA; the consumer owns constraints.
    input.setCustomValidity(error); instance.update({ Error: error })
    status.textContent = input.reportValidity() ? 'Reference ready.' : error
  }, { signal: listeners.signal })
  return { instance, input, destroy() {
    listeners.abort(); input.setCustomValidity(''); instance.destroy(); root.remove()
  } }
}

• Use Tab to reach the control. Space toggles choices; radio groups support arrow navigation. Inputs retain standard text-editing shortcuts.
• Check label focus, help/error associations and your own browser constraints. Restore or remove your consumer control as appropriate.
• Call the example handle’s destroy() when the view is removed. Abort your application listeners and requests; ignore any asynchronous result after disposal.
• Mount again and confirm there is one instance and one callback per interaction.

In Manage Dependencies, select FormField from BluKavantUi_Community_Inputs, together with the structures and public actions used by its API. Refresh existing references before publishing your consumer. Inherit the shared Community theme in your application's theme.

ExampleScreen — Screen (your application)
└─ ExistingLayout — referenced Layout Block instance (child of ExampleScreen)
   └─ Content — existing slot on ExistingLayout
      └─ ComponentRegion — Container (child of that slot)
         └─ MainComponent — BluKavantUi_Community_Inputs.FormField Block instance (child of ComponentRegion)

Reuse your screen’s existing Layout and its content slot; do not add a second layout. If your Layout names that slot differently, use its actual content slot. ComponentRegion is a new Container; MainComponent is a referenced Block instance.

Populate these existing slots on MainComponent with your own widgets. Do not create new Placeholder widgets to stand in for a referenced Block's slots.

Create local variables on ExampleScreen for the values your application changes. Use the exact native types below; lists are typed OutSystems Lists, while inputs ending in Json are Text containing the documented JSON. Bind each MainComponent.Input to its matching StateInput local. Constants can instead use the default directly. Fill required data from your Aggregate or Data Action before enabling interaction.

For each event you use, create the named screen Client Action below. Add its listed input parameters with the exact types. Select that action on MainComponent's event property, then enter each mapping explicitly. Event arguments and screen locals are different scopes.

This Block has no events to wire. The consuming screen controls its values and child content.

Place your focusable input in Control. Bind ControlId to that input’s runtime HTML id. FormField manages label, help, required and invalid ARIA attributes; it does not own the input value or emit a change event. Wire the inner control’s event to your screen state. Do not pass a referenced Block wrapper id as ControlId.

Publish the consumer, supply representative data, trigger each connected event and inspect the mapped arguments. Check a failed request, a retry and leaving/reopening the screen. The table describes the native contract; the Web recipes can contain capabilities with different native names or availability. Use these native names and the API tab as the authority for Service Studio.