Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

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'