Radio Lists

The radio-list scaffolding component (PacemRadioListElement) iterates radio buttons for single-choice input.
It provides nonetheless databinding capabilities for handy connects against datasources:

Declarative usage

Same results can be achieved in a more declarative way by wrapping a list of <pacem-data-item> elements.

Any PacemDatasourceElement can wrap <pacem-data-item> elements as a datasource.

Autogenerated

PacemRadioListElement can be injected into a form via metadata, the following way.

Radio lists are opinionatedly bound to enumerations in metadata.

{ "display": { "cssClass": ["form-minimal"] }, "props": [ { "prop": "fruit", "type": "byte", "dataType": "enumeration", "display": { "name": "Name", "watermark": "Your name here...", "description": "Write down your full name" }, "extra": { "enum": [ { "value": 1, "caption": "apples"}, { "value": 2, "caption": "bananas" }, { "value": 3, "caption": "cucumbers" }, { "value": 4, "caption": "dates" }, { "value": 5, "caption": "elderberries" }, { "value": 6, "caption": "figs" }, { "value": 7, "caption": "grapefruits" }, { "value": 8, "caption": "hackberries" } ] } } ]}

{ "display": { "cssClass": ["form-minimal"] }, "props": [ { "prop": "fruit", "type": "byte", "display": { "name": "Name", "watermark": "Your name here...", "description": "Write down your full name", "ui": "radioList" }, "extra": { "textProperty": "caption", "valueProperty": "value", "disabledProperty": "disabled", "source": [ { "value": 1, "caption": "apples"}, { "value": 2, "caption": "bananas" }, { "value": 3, "caption": "cucumbers", "disabled": true }, { "value": 4, "caption": "dates" }, { "value": 5, "caption": "elderberries" }, { "value": 6, "caption": "figs" }, { "value": 7, "caption": "grapefruits" }, { "value": 8, "caption": "hackberries" } ] } } ]}