@contentful/f36-helptext v4.0.1-next-v4-6282.2214
title: 'HelpText' type: 'component' status: 'stable' slug: /components/help-text/ github: 'https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components/src/components/HelpText' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-helptext--default'
typescript: ./src/HelpText.tsx
HelpText
is a styled copy block with guidance, placed in the context of form components.
Table of contents
How to use HelpText
- Only use this component in the context of a form, and as corresponding guidance to an input field
Code example
<React.Fragment>
<FormLabel htmlFor="name">Full name</FormLabel>
<TextInput
name="name"
value="Claus Mitchell"
className="f36-margin-bottom--xs"
/>
<HelpText>Enter your first and last name</HelpText>
</React.Fragment>
Content recommendations
- Use direct, succinct copy that helps the user to successfully complete the form
- Do not preface the instructions with introductory text, such as "please"
- To add additional context, link to documentation
- Do not use punctuation
- Use sentence style caps (in which only the first word of a sentence or term is capitalized)
Props
import { Props } from '@contentful/f36-docs-utils';
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago