Skip to main content

Function: ContextualHelp()

ContextualHelp(__namedParameters): Element

Defined in: composites/ContextualHelp/ContextualHelp.tsx:122

Contextual help: a small action.help trigger that reveals explanatory content in an anchored popover — the ⓘ beside a field's label.

Composes PopoverTrigger + an icon-only ActionButton + Popover, with the content wrapped in a bare dialog so focus moves into the surface and Escape/outside-click dismiss it (React Aria's own pattern for rich popover content).

Why it is a component rather than a documented composition: the affordance is a convention. The glyph must be the help glyph (action.help), the trigger must be the utility icon-only square with an accessible name, and the surface must be a dialog — left to each call site, all three drift (the ActionMenu rationale, one affordance over).

Reach for it when the explanation is too long for a description line and matters too rarely to spend the space permanently. A one-line constraint belongs in description; what a field's value does belongs here.

Entity = Action (the trigger); the surface keeps Popover's Overlay identity. The trigger renders data-scope="contextual-help".

Parameters​

ParameterType
__namedParametersContextualHelpProps

Returns​

Element

Example​

<TextField
  label="Region"
  contextualHelp={
    <ContextualHelp aria-label={aboutRegionLabel}>
      <Heading level={2} size="title-sm">Choosing a region</Heading>
      <Text>Deploys run in this region. Changing it migrates data.</Text>
    </ContextualHelp>
  }
/>