• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Help text

Component status
Contribution
Last releasedOctober 25, 2021
Current version@spectrum-css/helptext@1.0.2

Variants


Sizing
Verified

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
Verified

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>

Wrapping
Verified

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
Verified

Negative

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--neutral is-disabled">
      <div class="spectrum-HelpText-text">Create a password with at least 8 characters.</div>
    </div>
  </div>
</div>