FieldError

FieldError is an essential component for displaying error messages in forms in Arkyn. It provides clear and accessible visual feedback about validation issues, maintaining consistency in error presentation and intelligent conditional rendering.

FieldError should not be used with the native components in @arkyn/components, as these already have FieldError built-in.

tsx

import { FieldError } from "@arkyn/components";

Basic usage

This field is required

tsx

<FieldError>This field is required</FieldError>

Conditional rendering

FieldError only renders when it has content, avoiding empty elements in the DOM.

Visible error

tsx

/* ✅ Renders - has content */
<FieldError>This field is required</FieldError>;

/* ❌ Does not render - empty string */
<FieldError></FieldError>;

/* ❌ Does not render - null */
<FieldError>{null}</FieldError>;

/* ❌ Does not render - undefined */
<FieldError>{undefined}</FieldError>;

Properties

children - ReactNode Error message content (text, elements, etc.)

className - string Additional CSS classes for custom styling

HTML Properties

FieldError accepts all valid HTML properties of the strong element, including onClick, onFocus, style, data-, aria-, etc.

Notes

Semantic Element - Uses <strong> to give semantic importance to the error
Content Flexibility - Accepts any valid React content

On this page