Info Label
InfoLabel renders a form label with an inline info icon that opens a popover for supplementary guidance — format hints, policy notes, or field semantics.
Put label text as children and nest InfoLabelInfo in the slot for popover content. Keep critical errors in Field validation, not inside the popover.
- Form labels that need inline help without cluttering the layout
- Settings where a short label needs longer explanatory text
- Required indicators on labels with contextual guidance
- Put the visible label text as children — not inside the popover slot.
- Nest
InfoLabelInfoin theslotfor popover body content (format hints, policy notes). - Set
required=truewhen the associated field is mandatory. - Use
html_forto associate the label with a control id.
Label with a hover info icon that reveals supplementary helper text in a popover.
Shows a required indicator beside the label for mandatory form fields.
Small and large typography presets for dense settings rows versus prominent section headers.
Regular and semibold font weights for visual hierarchy among related labels.
Muted label styling in disabled form contexts; the info popover remains available on hover.
Override the default screen-reader name for the info trigger via info_aria_label.
Associate InfoLabel with an Input via html_for and matching input id.
InfoLabel inside a bounded Layout page scrollport — mirrors bounded page scroll behavior.