Group
The Group element creates a structured container for child components. It displays as a static layout block and does not accept user input. Use this element to maintain consistent structure across forms or wizard steps. Group supports nested components and propagates events triggered by its children.
Properties
Property | Value | Description |
---|---|---|
Type | Group | UI component type |
Group | Box | Part of the "Box" container group |
Identifier | 22 | Unique element ID |
Preview | ✓ | See image preview above |
Read-only | Y | Displays statically without accepting input |
Children | Y | Supports nested fields, links, and buttons |
Event | Y | Supports trigger or change propagation |
Value | Not a value-based field | |
Mandatory | Optional element | |
Error | No validation logic | |
Min | No minimum constraint | |
Max | No maximum constraint | |
List | Not a list-based container | |
Text, Icon | Does not include text or icon elements | |
Shade | No shaded background |
Usage Example
<Group>
<Edit label="Visit Summary" />
<Spacer />
<Link label="Edit" />
</Group>
SDK Integration
The Visit Took Place flow uses this element in sections such as summary, charges, and documents.
Method: /account/reset-password
This route completes the post-visit workflow. Group elements organize editable fields, upload controls, and metadata blocks.
Example UI Placement
Level | ID | Type | Description |
---|---|---|---|
2 | summary-group~0 | Group | Organizes visit summary fields |
2 | charge-group~0 | Group | Contains editable charge entries |
2 | discount-group | Group | Includes discount-related fields |
2 | document-group~0 | Group | Wraps uploaded medical documents |
Notes
- Use groups to enforce consistent layout and modular screen design
- Combine with
Section
,Spacer
, andBar
elements - Group supports interactive child components, but does not accept direct input