Section
Section elements introduce labeled groups of related fields or content. These elements typically appear as headers in panels or forms, helping organize content visually and semantically.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Section | UI component type |
| Group | Text | Belongs to the "Text" group in UI catalog |
| Identifier | 44 | Unique element ID |
| Preview | ✓ | See image preview above |
| Text, Icon | Y | Supports plain text or titles |
| Max | Lines | Supports multiline labels or subtitles |
| Read-only | Does not support user interaction | |
| Event | No event handling logic | |
| List | Not a list container | |
| Children | No nested components | |
| Shade | No background shading | |
| Value | Optional label content | |
| Min | No minimum constraint | |
| Mandatory | Optional element |
Usage Example
<SectionHeader title="Filter" />
SDK Integration
The Filter Panel uses this element. It appears with the SDK method:
Method: /profile/appointments/filter
Enables users to filter the appointments list using criteria such as date, patient name, and status. The filter panel includes grouped sections and responds to both desktop and mobile layouts.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
| D-1 | filter-section | Section | Filter | Title for the filter side panel |
Notes
- Use section elements to introduce logical groups of fields in forms or panels.
- On mobile, section headers remain visible in full-screen overlays.
- On desktop, section headers help separate field groups in compact panels.