React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreInputMessage

A message component for displaying error and warning messages below form inputs

Interactive Playground

Customize the message properties and see the changes in real-time

This field is required

Common Use Cases

Different message types for form validation

Error Message

This field is required

Warning Message

This value might be too long

Error Takes Priority Over Warning

Invalid email format

No Message (Returns null)

Component renders nothing when no messages provided

API Reference

Props

errorMessage

string - Error message to display (default: '')

warningMessage

string - Warning message to display (default: '')

Features

  • Displays error messages with warning icon
  • Displays warning messages when no error is present
  • Error messages take priority over warning messages
  • Returns null when no messages are provided
  • Consistent styling with theme colors
  • Small text size (text-xs) for subtle messaging
  • Icon integration for visual feedback

Usage Notes

Priority Logic: If both errorMessage and warningMessage are provided, only the error message will be displayed. This ensures critical validation errors are always visible.

Null Rendering: The component returns null when neither errorMessage nor warningMessage is provided, preventing unnecessary DOM elements.

Icon Display: Error messages include a warning icon for visual emphasis, while warning messages display text only.

Typical Usage: Place this component directly below form inputs to provide contextual feedback about validation state.