Error Message

The Error Message component provides you with form error messages and validation feedback.

Live Examples

Live Example

☀️

Copy

View Code

import { ErrorMessage, Input } from '@jarllyng/nostromo' export default function ErrorMessageExample() { return ( <div className="space-y-2"> <Input type="email" placeholder="Enter email" error /> <ErrorMessage>Please enter a valid email address</ErrorMessage> </div> ) }...

Import


import { ErrorMessage } from "@jarllyng/nostromo";
// or
import { ErrorMessage } from "@jarllyng/nostromo/error-message";

Usage


import { ErrorMessage, Input } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <div className="space-y-2">
      <Input type="email" error />
      <ErrorMessage>Please enter a valid email address</ErrorMessage>
    </div>
  );
}

Props

Prop	Type	Default	Required	Description
`variant`	`"default" \| "inline"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the error message
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Error message content

Standard HTML Props

The ErrorMessage component extends React.HTMLAttributes<HTMLDivElement>, so it accepts all standard HTML div attributes (e.g., id, data-*, aria-*). It also includes role="alert" and aria-live="polite" by default for accessibility.