Widgets

Widgets control how a field looks in the UI.

The schema controls the data. The widget controls the interaction.

Example:

{
  "title": "Smoker",
  "type": "boolean",
  "x-widget": "checkbox"
}

Letting Tiep choose

Most of the time, do not set x-widget. Tiep can choose a good widget from the schema.

Set x-widget only when you need a specific UI.

Common widgets

Widget	Use it for
section	Object sections.
textarea	Long string answers.
textareaNumber	Number answers.
textareaInteger	Integer answers.
checkbox	Boolean answers.
buttonGroup	Very short choices.
select	Small plain enum lists.
codedSelect	Small coded oneOf or concept set.
searchableCodedSelect	Large coded concept set.
codedMultiselect	Multiple coded choices.
searchableCodedMultiselect	Multiple choices from a large coded concept set.
list	Arrays.

Example: button group

"priority": {
  "title": "Priority",
  "type": "string",
  "enum": ["Routine", "Urgent"],
  "x-widget": "buttonGroup"
}

Example: searchable coded multiselect

"diagnoses": {
  "title": "Diagnoses",
  "type": "array",
  "description": "Select all diagnoses relevant to this visit",
  "items": {
    "type": "string",
    "x-concept-set-id": 12,
    "x-search-index": true
  },
  "x-widget": "searchableCodedMultiselect"
}

Important rule

The widget must match the field type.

Bad:

{
  "title": "Age",
  "type": "number",
  "x-widget": "checkbox"
}

That does not make sense. Age is a number, not a yes/no answer.