Reference

Component reference

Link

General-purpose link for references and related actions surfaced by the renderer. Render as an anchor or equivalent control with standard link behavior.

Use standard link behavior; avoid preventing default unless you provide equivalent navigation.

Errors

Inline list of validation messages for a specific control, answer, or the form summary. Keep each message distinct and close to the related input or summary area.

Consider rendering messages as a list. If you use aria-live or role="alert" to announce updates, prefer polite announcements to avoid repeated reads.

OptionsLoading

Loading UI for option-backed controls while options are fetching. Use it to show a spinner or skeleton where options would appear.

The renderer may render OptionsLoading in the question scaffold or selection table while options are loading. Option controls also receive isLoading, so avoid duplicating spinners if you render both.

Help

Short help text associated with a node label. Usually rendered near the label and referenced by the control via aria-describedby.

Legal

Legal or consent content tied to a node. It can be inline text or a trigger that reveals more detail, but should remain accessible.

Flyover

Supplementary context for a node, often presented as a tooltip or popover. Keep it discoverable from the header and reachable via aria-describedby.

Label

Header block for questions and groups that owns label layout (prefix + label text), required marker, and optional help/legal/flyover slots. It also provides the labelled-by anchor for the main control.

as is a semantic/styling hint; themes may render a div for all values (including "legend") and should not assume fieldset/legend markup.

InputGroup

Layout wrapper for multi-part inputs such as quantity and coding. Arrange the children as a single logical field using a 12-column span system. Provide a span value per child; themes do not infer or default them. Keep the total at 12 to avoid gaps or wrapping.

TextInput

Single-line text field for short string answers, URLs, or identifiers. Render a standard input and forward accessibility ids and placeholder.

TextArea

Multi-line text field for longer narrative responses. Use a textarea or equivalent and forward accessibility ids and placeholder.

NumberInput

Numeric text field for integer, decimal, and quantity values. Accept undefined for empty and show a unit label when provided.

DateInput

Date-only field for calendar values. Use a date picker or text input but keep the value string intact.

DateTimeInput

Date and time field for combined values. Use a datetime picker or text input but keep the value string intact.

TimeInput

Time-only field for hours and minutes. Use a time picker or text input but keep the value string intact.

SliderInput

Range control for bounded numeric values. Show bounds and current value when available, and treat undefined as no selection.

SpinnerInput

Numeric control with stepper affordances for small ranges. It should support typing, step changes, and min/max rules.

SelectInput

Single-select dropdown for option lists. Include disabled legacy entries in the options list when needed and allow clearing the selection when applicable.

The renderer always provides id for option-backed controls. Use it on the primary focusable element and for any combobox/listbox wiring in custom select UIs.

RadioButton

Single radio input used for table/grid selections or custom radio layouts.

RadioButtonList

Single-select option list presented as radio buttons. Include disabled legacy options in the options list when needed.

Checkbox

Single checkbox used for table/grid selections or custom checkbox layouts.

CheckboxList

Multi-select option list presented as checkboxes. Support per-option errors and optional custom-option content.

If a selected option provides errors or ariaDescribedBy, render the error content near that option and attach aria-describedby to the option's focusable element.

MultiSelectInput

Composite multi-select UI that combines a picker, chips, and optional custom-option content. It should display selections as chips and allow removal when permitted.

When rendering chips or selected rows, attach SelectedOptionItem.ariaDescribedBy to the focusable element for that selection so per-selection errors can be announced.

CustomOptionForm

Layout wrapper for custom option entry flows. Use it to present the custom input along with submit/cancel actions.

Use cancel as the "back to options" action and submit to commit the custom value.

FileInput

Attachment picker that handles file selection, display of the selected file, and clearing. Call onChange for the raw file (or undefined when clearing) so the renderer can update the Attachment.

AnswerList

Container that lays out one or more answers and an optional add control. It controls spacing and ordering of answer rows.

AnswerScaffold

Layout for a single answer row, combining the main control, an optional remove action, and nested content such as child nodes and errors.

QuestionScaffold

Wrapper around a question that organizes header, control, and validation feedback. Use it as the outer shell for question nodes.

GroupList

Wrapper around a repeating group that holds the collection of instances and the add control.

GroupScaffold

Layout shell for a group instance (repeating or not). It can also render an optional remove action and errors.

Header

Layout wrapper for group nodes rendered with control="header". Use it to style and place header content such as summary blocks or callouts above a group body.

Footer

Layout wrapper for group nodes rendered with control="footer". Use it to style and place footer content such as summaries or actions below a group body.

DisplayRenderer

Renderer for display-only nodes such as static text or markdown. It should not expose input controls.

Stack

List container that renders nodes in order. It should handle spacing and grouping.

Form

Outer wrapper for the questionnaire. If you render a form element, prevent default and call onSubmit; otherwise invoke onSubmit from your own controls. When pagination is provided, render prev/next controls and keep them aligned with submit/cancel.

Example patterns:

<form
  onSubmit={(event) => {
    event.preventDefault();
    onSubmit?.();
  }}
>
  {children}
</form>

<div>
  {children}
  <button type="button" onClick={onSubmit}>
    Submit
  </button>
</div>

Table

Tabular layout used by grid-style groups. Render headers and rows based on column and row metadata. Render a row header column for the row content values. When isLoading or errors are provided on a column or row, place them alongside the header content.

TabContainer

Tabbed layout for group panels. Render the active panel, wire ids for aria, and show errors when relevant.

Implement tabs with the standard ARIA roles, using buttonId and panelId to wire aria-controls and aria-labelledby.

Data types

Shared data structures referenced by theme component props.

FormPagination

Pagination state used by Form when rendering paged questionnaires.

OptionItem

Base option shape used by option selectors such as select inputs and radio lists.

SelectedOptionItem

Represents a selected option rendered as a chip or a single selection.

CustomOptionAction

Attachment

Attachment shape used by FileInput to display metadata and stored content.

TableColumn

TableRow

When any row provides onRemove, render a trailing remove-action column for all rows.

TableCell

TabItem