@spectrum-web-components/help-text

Description

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';

Sizes

Small

<sp-help-text size="s">Passwords must be at least 8 characters.</sp-help-text>

Medium

<sp-help-text size="m">Passwords must be at least 8 characters.</sp-help-text>

Large

<sp-help-text size="l">Passwords must be at least 8 characters.</sp-help-text>

Extra Large

<sp-help-text size="xl">Passwords must be at least 8 characters.</sp-help-text>

Negative

The negative variant of <sp-help-text> is used to convey error messages. An error message should be different than the informative message otherwise delivers to the visitor and should show a solution for correcting the error that has been encountered.

<sp-help-text variant="negative">
    Create a password with at least 8 characters.
</sp-help-text>

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-help-text variant="negative" icon>
    Create a password with at least 8 characters.
</sp-help-text>

Disabled

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

<sp-help-text disabled>Passwords must be at least 8 characters.</sp-help-text>