ErrorMessage
A form error message component rendered with role="alert" for accessible error announcements.
Basic
With Form Field
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The error message content to display. Rendered with role="alert" for screen reader announcements. |
--mantle-bg | CSS variable | theme default | Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }} |
--mantle-border | CSS variable | theme default | Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }} |
--mantle-text | CSS variable | theme default | Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }} |
--mantle-ring | CSS variable | accent | Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }} |
childrenReactNodeThe error message content to display. Rendered with role="alert" for screen reader announcements.
--mantle-bgtheme defaultCSS variableOverride the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
--mantle-bordertheme defaultCSS variableOverride the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
--mantle-texttheme defaultCSS variableOverride the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
--mantle-ringaccentCSS variableOverride the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}