Skip to content

FormMessage

FormMessage

Form message component with theme-aware styling for displaying validation feedback

Uses CSS custom properties from @sparkle/theme for consistent theming across light/dark modes and supports semantic colors for different message types.

Import

import { FormMessage } from '@sparkle/ui'

Props

Prop	Type	Required	Default	Description
`match`	`"valueMissing" \| "typeMismatch" \| "patternMismatch" \| "tooLong" \| "tooShort" \| "rangeUnderflow" \| "rangeOverflow" \| "stepMismatch" \| "badInput" \| "valid" \| undefined`		“	Built-in validation constraint to match
`children`	`React.ReactNode`	✓	“	Message children content
`announce`	`boolean \| undefined`		“	Whether to announce the message to screen readers
`type`	`"success" \| "error" \| "info" \| undefined`		“	Type of message for styling

Theme Integration

This component uses CSS custom properties from @sparkle/theme for consistent styling across light and dark modes.

Design Tokens Used

--theme-*: Uses theme design tokens for consistent styling

You can customize the appearance by:

Theme Variables: Modify theme tokens in your @sparkle/theme configuration
CSS Classes: Apply custom CSS classes via the className prop
CSS-in-JS: Use styled-components or emotion with the component

Accessibility

This component follows accessibility best practices with proper ARIA attributes and keyboard support.

Additional Resources