Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar462

Help Text

Version 13.1.0GithubStorybook

Help Text is paired with a form element to give users information to prevent or correct formatting errors.

Installation

Installation page anchor
yarn add @twilio-paste/help-text - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Input} from '@twilio-paste/core/input';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';

const Component = () => (
  <>
    <Label htmlFor="foo" required>
      Foo
    </Label>
    <Input id="foo" type="text" value="" onChange={() => {}} aria-describedby="foo_text" />
    <HelpText id="foo_text">Enter some text.</HelpText>
  </>
);

Props

Props page anchor

HelpText

HelpText page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'HELP_TEXT'

marginTop

Sets the top margin on the div element.

Type
"space0"
Default
'space30'

variant

The style variant of the help text.

Type
HelpTextVariants
Default
'default'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.