Combo
The Combo element renders a dropdown (select) field. Use this element to present a list of predefined options where the user selects only one. Combo supports read-only behavior, validation states, icon labeling, and event handling.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Combo | UI component type |
| Identifier | 6 | Unique element ID |
| Group | Field | Part of the Field group |
| Value | Y | Stores the selected value |
| Mandatory | Y | Field must be completed if required |
| Error | Y | Supports validation errors |
| Min | Not applicable | |
| Max | Not defined for static dropdowns | |
| Read-only | Y | Can render as non-editable |
| List | Y | Displays values in a dropdown list |
| Text, Icon | Y | Label can include text or icon |
| Children | Does not contain nested elements | |
| Event | Y | Emits change events when selection updates |
| Shade | Y | Background style changes based on state |
Usage Example
<Combo
label="Select Location"
options={[
{ label: "Clinic A", value: "clinic-a" },
{ label: "Clinic B", value: "clinic-b" }
]}
onChange={handleChange}
/>
SDK Integration
The Walk-in flow uses this element to determine doctor and location parameters for QR code generation.
Method: walk-in
When a user selects a doctor (profile-id) and a supported location (location_id), the system validates the combination and generates a QR code for the patient.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | profile-id | Combo | Select doctor | Doctor selection dropdown |
1 | location_id | Combo | Select location | Location selection dropdown |
Notes
- Use only when selecting a single value from a finite list.
- Avoid complex logic inside option labels.
- Combine with validation and helper text when the list is long.