Forms and controls

RelationInput

RelationInput - searchable single-select for relation (foreign key) fields. Presentation only: the caller supplies `search` (and optionally `resolve`), so the same lookup an assistant uses to turn "Acme" into a record id backs the picker. Built on the smrt-ui `Combobox`, which supplies the ARIA 1.2 combobox pattern (arrow keys, Enter, Escape, `aria-activedescendant`) and registers with the rich Form's control registry. The form posts the committed id under `name`, never the visible label.

Public export

typescript

import { RelationInput } from '@happyvertical/smrt-ui/forms';

Import path: @happyvertical/smrt-ui/forms
Props: 20
Props described: 20 of 20
Bindable state: 0
Callback events: 2
Verified release: 0.57.40

Props

NameTypeRequiredDescription

namestringYesField name; the selected id posts under it.

labelstringYesVisible label.

valuestringNoSelected record id (bindable). Empty string means no selection.

requiredbooleanNoRequired field: hides the clear button and flags an empty value.

disabledbooleanNoDisabled state.

errorstringNoValidation error message, shown below the field.

placeholderstringNoPlaceholder shown when nothing is selected.

descriptionstringNoHint announced with the field.

search(query: string) => Promise<RelationOption[]>YesLook up records matching the text; called with '' when the list opens.

resolve(id: string) => Promise<{ id: string; label: string; } | null>NoLook up the current value's label when it has not been searched yet.

onCreate(query: string) => void | RelationOption | Promise<void | RelationOption>No"New ..." action. Receives the text most recently searched for. May return the created record, which is then selected.

debounceMsnumberNoMilliseconds to wait after typing before searching.

interactionControlInteractionOptions | falseNoCombobox interaction options (stable id, subject) for agents.

createLabelstringNoText for the "New ..." button.

clearLabelstringNoAccessible name for the clear button.

loadingTextstringNoStatus text while searching.

emptyTextstringNoStatus text when nothing matches.

errorTextstringNoStatus text when the search fails.

resultsText(count: number) => stringNoStatus text announcing how many results are listed.

onchange(value: string) => voidNoCalled when the selected id changes ('' when cleared).

Bindable state

This component has no bindable public state.

Callback events

onCreate(query: string) => void | RelationOption | Promise<void | RelationOption>
onchange(value: string) => void

Public export

Props

Bindable state

Callback events

Examples and explanation