import { Meta, ArgTypes } from '@storybook/blocks';
import { FieldValidationMessage } from './FieldValidationMessage';

<Meta title="MDX|FieldValidationMessage" component={FieldValidationMessage} />

# FieldValidationMessage

Component for displaying a validation error message under an element.

### Example usage

An example usage of this is in out `FormField` component.

```tsx
export const CustomFormField = () => {
  return (
    <div>
      Label
      <div>
        <input />
        {error && <FormValidationMessage>Invalid input</FormValidationMessage>}
      </div>
    </div>
  );
};
```

<ArgTypes of={FieldValidationMessage} />
