Labeled Item Showcase
Example
My Label:
i
This is a tooltip
My Required Label:
Component Documentation
Component Name
LabeledItem
Description
Displays a labeled section with an optional tooltip and associated content. Useful for form fields, information displays, or any paired label-content scenarios.
Use like example
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | label | The text label displayed next to the content. |
| tooltip | string or null | Optional tooltip text displayed when hovering over the tooltip icon. | |
| is_required | boolean | false | Indicates whether the labeled item is required. |
| is_disabled | boolean | false | Indicates whether the content is disabled. |
| font_weight | number | 500 | The font weight of the label text. |
| font_size | number | 1.6 | The font size of the label text in rem. |
| color | CSS color | var(--g4-t) | The color of the label text. |
| disabled_color | CSS color | var(--g8-t) | The color of the label text when disabled. |
| ml | number | 0 | Margin-left in rem. |
| mr | number | 0 | Margin-right in rem. |
| mt | number | 0 | Margin-top in rem. |
| mb | number | 0 | Margin-bottom in rem. |
| heading_min_width | number | 20 | Minimum width of the label heading in rem. |
| content_min_width | number | 30 | Minimum width of the content area in rem. |
| content_max_width | number | 50 | Maximum width of the content area in rem. |
| children | snippet | The content to be displayed alongside the label. |
