@spectrum-web-components/help-text

Overview

An <sp-help-text> provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.

Usage

yarn add @spectrum-web-components/help-text

Import the side effectful registration of <sp-help-text> via:

import '@spectrum-web-components/help-text/sp-help-text.js';

When looking to leverage the HelpText base class as a type and/or for extension purposes, do so via:

import { HelpText } from '@spectrum-web-components/help-text';

Options

Sizes

Small

<sp-field-label size="s" for="size-s">Password</sp-field-label>
<sp-textfield size="s" id="size-s" type="password">
    <sp-help-text size="s" slot="help-text">
        Create a password with at least 8 characters.
    </sp-help-text>
</sp-textfield>

Medium

<sp-field-label size="m" for="size-m">Password</sp-field-label>
<sp-textfield size="m" id="size-m" type="password">
    <sp-help-text size="m" slot="help-text">
        Create a password with at least 8 characters.
    </sp-help-text>
</sp-textfield>

Large

<sp-field-label size="l" for="size-l">Password</sp-field-label>
<sp-textfield size="l" id="size-l" type="password">
    <sp-help-text size="l" slot="help-text">
        Create a password with at least 8 characters.
    </sp-help-text>
</sp-textfield>

Extra Large

<sp-field-label size="xl" for="size-xl">Password</sp-field-label>
<sp-textfield size="xl" id="size-xl" type="password">
    <sp-help-text size="xl" slot="help-text">
        Create a password with at least 8 characters.
    </sp-help-text>
</sp-textfield>

Negative

The negative variant of <sp-help-text> is used to convey error messages.

Help text displays either a description (the neutral variant) or an error message (the negative variant) in the same space. When a description is present and an error is triggered, it is replaced with an error message. Once the error is resolved, the help text description reappears.

Since one gets replaced by the other, the language of the help text description and the error need to work together to convey the same messaging. The description text explains the requirements or adds supplementary context for how to successfully interact with a component. The error message text tells a user how to fix the error by re-stating the interaction requirements. Make sure that the help text description and error message include the same essential information so that it isn’t lost if one replaces the other.

Communicate error messages in a human-centered way by guiding a user and showing them a solution — don’t simply state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user.

For help text, usually the error is related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss filling out a required field that asks for their email address, write the error text like you’re offering a hint or a tip to help guide them to understand what needs to go in the missing field: “Enter your email address.”

<sp-field-label for="negative">Password</sp-field-label>
<sp-textfield id="negative" type="password" required invalid>
    <sp-help-text slot="help-text">
        Create a password with at least 8 characters.
    </sp-help-text>
    <sp-help-text variant="negative" slot="help-text-negative">
        Passwords must be at least 8 characters
    </sp-help-text>
</sp-textfield>

Icon

When associated with content that does not supply an icon outlining the presence of an error, use the icon attribute to display one as part of the <sp-help-text> element.

<sp-field-group horizontal id="fruit">
    <sp-checkbox value="apple">Apple</sp-checkbox>
    <sp-checkbox
        value="not-a-fruit"
        onchange="javascript:this.parentElement.invalid = this.checked"
    >
        Lettuce
    </sp-checkbox>
    <sp-checkbox value="strawberry" checked>Strawberry</sp-checkbox>
    <sp-help-text slot="help-text">One of these is not a fruit.</sp-help-text>
    <sp-help-text icon slot="negative-help-text" icon>
        Choose actual fruit(s).
    </sp-help-text>
</sp-field-group>

Disabled

When the content associated to the element is disabled, use the disabled attribute to match the delivery of the <sp-help-text> element to that content.

<sp-field-label for="color" disabled>Color</sp-field-label>
<sp-combobox id="color" disabled>
    <sp-menu-item value="red">Red</sp-menu-item>
    <sp-menu-item value="green">Green</sp-menu-item>
    <sp-menu-item value="blue">Blue</sp-menu-item>
    <sp-help-text slot="help-text" disabled>
        Choose or add at least one color.
    </sp-help-text>
</sp-combobox>

Accessibility

Be descriptive

Good, descriptive help text includes 1-2 short sentences of information such as:

• An overall description of an input field or controls
• Hints for what kind of information needs to be inputted or selected
• Specific formatting examples or requirements

Ensure help text and field share the same root

It is not currently possible to provide accessible ARIA references between elements in different shadow roots. To ensure proper association between elements, help text must be included via the slot="help-text" or slot="help-text-negative" in an <sp-text-field>, <sp-field-group>, <sp-combobox> or <sp-picker>.

To add help text to your own custom element, see Help Text Mixin.

Changelog

1.7.0 (2025-06-11)

Minor Changes

sp-overlay: Fixed : Overlays (like pickers and action menus) were incorrectly closing when scrolling occurred within components. The fix ensures the handleScroll method in OverlayStack only responds to document/body scrolling events and ignores component-level scrolling events, which was the original intention.

sp-card: Fixed: On mobile Chrome (both Android and iOS), scrolling on sp-card components would inadvertently trigger click events. This was caused by the timing-based click detection (200ms threshold) in the pointer event handling, which could misinterpret quick scrolls as clicks. This issue did not affect Safari on mobile devices.

sp-action-button: - Fixed : Action buttons with href attributes now properly detects modifier keys and skips the proxy click, allowing only native browser behavior to proceed.

Patch Changes

sp-styles: Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

sp-card: - Fixed: sp-card component relies on sp-popover for certain toggle interactive behaviors, but this dependency was missing from its dependency tree.

sp-menu: Fixes: Icons in menu stories weren't properly responding to theme changes when used in functional story components. Switching to class-based LitElement components ensures proper component lifecycle hooks and shadow DOM context for icon initialization and theme integration.

sp-tabs: Added @spectrum-web-components/action-button as a dependency for Tabs as its used in the direction button.

sp-split-view: Added @spectrum-web-components/shared dependency in splitview since it uses ranDomId from the shared package

sp-textfield: Replace deprecated word-break: break-word with overflow-wrap: break-word to align with modern CSS standards and improve cross-browser compatibility. This property was deprecated in Chrome 44 (July 2015) in favor of the standardized overflow-wrap property.