Radio
The Radio element presents a single-select option within a defined group. Each radio instance supports label text, validation, and events. Use this component for user preferences, settings, and form-driven workflows where the user must choose exactly one item.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Radio | UI component type |
| Group | Field | Belongs to the "Field" group in the UI catalog |
| Identifier | 39 | Unique element ID |
| Preview | ✓ | Displays preview image |
| Value | Y | Stores selected option |
| Mandatory | Y | Requires a selection when validation is active |
| Error | Y | Displays validation error messages |
| Min | Not applicable | |
| Max | Not applicable | |
| Read-only | Y | Displays without allowing user interaction |
| Text, Icon | Y | Supports label text and inline icons |
| Event | Y | Triggers changes on selection |
| Shade | Y | Uses background shading when styled |
| Children | Does not support nested components | |
| List | Not a list container |
Usage Example
<RadioGroup name="language">
<Radio value="en" label="English" />
<Radio value="he" label="Hebrew" />
<Radio value="es" label="Spanish" />
</RadioGroup>
SDK Integration
The Language Selection screen includes this element. It links to the SDK method:
Method: /account/language-change
Changes the app’s display language. Applies internationalization across all screens and appointment workflows.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | en | Radio | English | Default English option |
1 | language~he | Radio | Hebrew | Selects Hebrew |
1 | language~es | Radio | Spanish | Selects Spanish |
1 | language~fr | Radio | French | Selects French |
Notes
- Place radio buttons within a
RadioGroupto enforce single-selection behavior. - Use when choices are mutually exclusive.
- Always provide meaningful, descriptive labels.