sp-help-text

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
icon icon boolean false
size size ElementSize
variant variant HelpTextVariants 'neutral' The visual variant to apply to this 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 #

See it on NPM! How big is this package in your project?

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>