No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Help text

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.

Variants

Default

The default neutral variant is used to convey informative messages.

Create a password with at least 8 characters.

Disabled

Help text using the neutral variant can be displayed in a disabled state. The text appears with a lighter gray that matches the style of other components in a disabled state. Help text using the negative variant cannot be displayed in a disabled state because it communicates an error, and error messages should not be visible when the component is disabled.

Create a password with at least 8 characters.

Negative

The negative variant is used to convey error messages and can have an optional icon.

In most cases, help text is used with a component that already displays an icon communicating an error (e.g., text field, picker, combo box), so it’s not necessary to include another icon. In other cases, help text that is used with a component that does not display an icon communicating an error (e.g., field group) needs to display an icon.

Without icon
Create a password with at least 8 characters.
With icon
Create a password with at least 8 characters.

Sizing

Help text comes in four different sizes: small, medium, large, and extra-large. The medium size is the default.

Small
Create a password with at least 8 characters.
Medium
Create a password with at least 8 characters.
Large
Create a password with at least 8 characters.
Extra-large
Create a password with at least 8 characters.

Text Overflow

When the text is too long for the available horizontal space, it wraps to form another line.

Variant: neutral
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.
Variant: negative
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.

Properties

The component accepts the following inputs (properties):

NameDescriptionDefault
Content
Text*
string
-
Component
Variant
string
-
Size*
string
-
State
Disabled
boolean
-

Modifiable custom properties

These are empty CSS custom property hooks available in this component that enable one-off customizations specific to a product implementation.

Property
--mod-helptext-bottom-edge-to-workflow-icon
--mod-helptext-bottom-to-text
--mod-helptext-content-color-default
--mod-helptext-font-family
--mod-helptext-font-size
--mod-helptext-font-style
--mod-helptext-font-weight
--mod-helptext-icon-color-default
--mod-helptext-icon-size
--mod-helptext-line-height
--mod-helptext-line-height-cjk
--mod-helptext-min-height
--mod-helptext-text-to-visual
--mod-helptext-top-edge-to-workflow-icon
--mod-helptext-top-to-text

Tagged releases