• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Help text

Component status
Contribution
Current version@spectrum-css/helptext@5.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/helptext@6.0.0-s2-foundations.12
ReleasedAugust 2, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Sizing
Contribution

S

Create a password with at least 8 characters.

M

Create a password with at least 8 characters.

L

Create a password with at least 8 characters.

XL

Create a password with at least 8 characters.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeS spectrum-HelpText--neutral">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeL spectrum-HelpText--neutral">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeXL spectrum-HelpText--neutral">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
</div>

Negative
Contribution

Negative

Create a password with at least 8 characters.

Negative with icon

Create a password with at least 8 characters.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Negative</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Negative with icon</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
</div>

Negative Sizing (with icons)
Contribution

S

Create a password with at least 8 characters.

M

Create a password with at least 8 characters.

L

Create a password with at least 8 characters.

XL

Create a password with at least 8 characters.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeS spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeL spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeXL spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
</div>

Wrapping
Contribution

Wrapping

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Wrapping</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-HelpText-validationIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <div class="spectrum-HelpText-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

Disabled
Contribution

Disabled

Create a password with at least 8 characters.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral is-disabled">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.