Tabs
Tabs allow users to switch between multiple views or data categories within the same screen. Each tab corresponds to a container panel that becomes visible when selected. Use Tabs to group related sections such as appointment details, charges, or documents.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Tabs | UI component type |
| Group | Tabs | Belongs to the "Tabs" group in UI catalog |
| Identifier | 49 | Unique element ID |
| Preview | ✓ | See image preview above |
| Read-only | Supports user interaction | |
| Children | Contains individual tab labels and tab content | |
| Event | Triggers a view update when tab selection changes | |
| Value | Not value-based | |
| Mandatory | Optional UI element | |
| Error | Not applicable | |
| Min | Not applicable | |
| Max | Not applicable | |
| List | Not a list container | |
| Text, Icon | May include icons in tab labels (if styled) | |
| Shade | May be styled with underline or background fill |
Usage Example
<Tabs>
<Tab label="Details" />
<Tab label="Documents" />
<Tab label="Charges" />
</Tabs>
SDK Integration
The Appointment Details screen uses Tabs on desktop to separate appointment metadata, patient records, and documents. Tabs help organize these sections without reloading the screen.
Method: /profile/appointments/{id}/details
Tabs support navigation between appointment subviews without interrupting layout flow.
Example UI Placement
| Level | Reference | Type | Description |
|---|---|---|---|
3 | — | Tabs | Container for navigation sections |
3 | — | Bar | Visual separator under tabs |
3 | — | Group | Tab content panels |
Notes
- Use Tabs to reduce vertical scrolling and focus the user view.
- Pair with Bar and Section components for better structure.
- Do not nest Tabs within other Tabs.