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:
Spectrum website
Spectrum web components
npm
GitHub
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.
The default neutral variant is used to convey informative messages.
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.
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.
Help text comes in four different sizes: small, medium, large, and extra-large. The medium size is the default.
When the text is too long for the available horizontal space, it wraps to form another line.
The component accepts the following inputs (properties):
Name | Description | Default |
---|---|---|
Content | ||
Text* | string | - |
Component | ||
Variant | string | - |
Size* | string | - |
State | ||
Disabled | boolean | - |
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 |
latest
next
s2-foundations
beta