FormMessage
Form messages communicate validation, help, and error states close to their controls.
Overview and decision boundary
Use FormMessage for validation, confirmation, or contextual help inside a form field.
Do not use vague messages like Invalid value.
Preview
Use at least 3 characters.
This will be visible to collaborators.
Looks good.
import { FormMessage } from '@nerio-ui/ui';<FormMessage>Use at least 3 characters.</FormMessage>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add form-messageimport { FormMessage } from '@nerio-ui/ui';Usage
import { FormMessage } from '@nerio-ui/ui';<FormMessage>Use at least 3 characters.</FormMessage>Variants
| Variant | Purpose |
|---|---|
neutral | Low-emphasis status or message. |
danger | Error, destructive, or blocking state. |
success | Positive completion or validation state. |
Anatomy
| Slot | Purpose |
|---|---|
root | Message text with tone and compact spacing. |
States
| State | Purpose |
|---|---|
Visible | Appears close to the relevant control. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Associate messages with controls through aria-describedby.
- Use danger tone for validation errors.
- Set role="alert" only for active validation errors that should be announced.
- Do not replace field-level errors with toasts.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | form-message installs 5 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use FormMessage for validation, confirmation, or contextual help inside a form field.
Do / do not
Do
Tell users how to fix an error.
Do not
Do not use vague messages like Invalid value.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-color-text-tertiary | Public customization point for this component contract. |
--n-color-status-danger | Public customization point for this component contract. |
--n-color-status-success | Public customization point for this component contract. |