@contentful/f36-validation-message v4.0.1-next-v4-6282.2214

title: 'ValidationMessage' type: 'component' status: 'stable' slug: /components/validation-message/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/validation-message' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-validationmessage--default'

typescript: ./src/ValidationMessage.tsx

ValidationMessage provides a consistent styled paragraph for messages in case of validation errors.

Table of contents

• How to use ValidationMessage
• Code examples
• Content recommendations
• Props

How to use ValidationMessage

Only use this component in the context of a form and as corresponding guidance to an input field which has validations

Code examples

<React.Fragment>
  <FormLabel htmlFor="name" required>
    Full name
  </FormLabel>
  <TextInput
    name="name"
    value="Claus Mitchell"
    className="f36-margin-bottom--xs"
  />
  <ValidationMessage>Name is a required field</ValidationMessage>
</React.Fragment>

Content recommendations

• Avoid negative words and tone
• Give direction on how to fix the error
• Use direct, succinct copy. Do not preface the instructions with introductory text, such as "please"
• To add additional context, link out 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';