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.

CSS Custom Properties #

Name Default
--spectrum-helptext-l-negative-texticon-icon-padding-bottom var(--spectrum-global-dimension-size-75)
--spectrum-helptext-l-negative-texticon-icon-padding-top var(--spectrum-global-dimension-size-75)
--spectrum-helptext-l-neutral-texticon-icon-gap var(--spectrum-global-dimension-size-115)
--spectrum-helptext-l-neutral-texticon-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-helptext-l-neutral-textonly-text-letter-spacing var(--spectrum-global-font-letter-spacing-none)
--spectrum-helptext-l-neutral-textonly-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-helptext-l-neutral-textonly-text-padding-bottom var(--spectrum-global-dimension-size-115)
--spectrum-helptext-l-neutral-textonly-text-padding-top var(--spectrum-global-dimension-size-75)
--spectrum-helptext-l-neutral-textonly-text-transform none
--spectrum-helptext-m-negative-texticon-icon-color var(--spectrum-semantic-negative-icon-color)
--spectrum-helptext-m-negative-texticon-icon-color-disabled var(--spectrum-alias-icon-color-disabled)
--spectrum-helptext-m-negative-texticon-icon-padding-bottom var(--spectrum-global-dimension-size-40)
--spectrum-helptext-m-negative-texticon-icon-padding-top var(--spectrum-global-dimension-size-40)
--spectrum-helptext-m-negative-texticon-text-color var(--spectrum-semantic-negative-text-color-small)
--spectrum-helptext-m-negative-texticon-text-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-helptext-m-neutral-texticon-icon-color var(--spectrum-alias-icon-color)
--spectrum-helptext-m-neutral-texticon-icon-color-disabled var(--spectrum-alias-icon-color-disabled)
--spectrum-helptext-m-neutral-texticon-icon-gap var(--spectrum-global-dimension-size-100)
--spectrum-helptext-m-neutral-texticon-text-color var(--spectrum-alias-label-text-color)
--spectrum-helptext-m-neutral-texticon-text-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-helptext-m-neutral-texticon-text-size var(--spectrum-global-dimension-font-size-75)
--spectrum-helptext-m-neutral-textonly-text-letter-spacing var(--spectrum-global-font-letter-spacing-none)
--spectrum-helptext-m-neutral-textonly-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-helptext-m-neutral-textonly-text-padding-bottom undefined
--spectrum-helptext-m-neutral-textonly-text-padding-top var(--spectrum-global-dimension-static-size-50)
--spectrum-helptext-m-neutral-textonly-text-transform none
--spectrum-helptext-s-negative-texticon-icon-padding-bottom var(--spectrum-global-dimension-size-50)
--spectrum-helptext-s-negative-texticon-icon-padding-top var(--spectrum-global-dimension-size-50)
--spectrum-helptext-s-neutral-texticon-icon-gap var(--spectrum-global-dimension-size-85)
--spectrum-helptext-s-neutral-texticon-text-size var(--spectrum-global-dimension-font-size-75)
--spectrum-helptext-s-neutral-textonly-text-letter-spacing var(--spectrum-global-font-letter-spacing-none)
--spectrum-helptext-s-neutral-textonly-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-helptext-s-neutral-textonly-text-padding-bottom undefined
--spectrum-helptext-s-neutral-textonly-text-padding-top var(--spectrum-global-dimension-static-size-50)
--spectrum-helptext-s-neutral-textonly-text-transform none
--spectrum-helptext-xl-negative-texticon-icon-padding-bottom var(--spectrum-global-dimension-size-115)
--spectrum-helptext-xl-negative-texticon-icon-padding-top var(--spectrum-global-dimension-size-115)
--spectrum-helptext-xl-neutral-texticon-icon-gap var(--spectrum-global-dimension-size-125)
--spectrum-helptext-xl-neutral-texticon-text-size var(--spectrum-global-dimension-font-size-200)
--spectrum-helptext-xl-neutral-textonly-text-letter-spacing var(--spectrum-global-font-letter-spacing-none)
--spectrum-helptext-xl-neutral-textonly-text-line-height var(--spectrum-alias-component-text-line-height)
--spectrum-helptext-xl-neutral-textonly-text-padding-bottom var(--spectrum-global-dimension-size-130)
--spectrum-helptext-xl-neutral-textonly-text-padding-top undefined
--spectrum-helptext-xl-neutral-textonly-text-transform none

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>