Field Error

Overview

FieldError is the shared inline validation-message primitive used across form controls in @fsai/shared-ui.

It is the low-level error-display building block behind:

• Input
• Select
• AutocompleteSelect

Use FieldError directly when you are composing a custom field from lower-level primitives and still need the standard validation message styling.

Basic Usage

import { FieldError, InputPrimitive, Label } from '@fsai/shared-ui';

<div>
  <Label htmlFor="email">Email</Label>
  <InputPrimitive id="email" aria-invalid />
  <FieldError>Invalid email address</FieldError>
</div>

With react-hook-form

<FieldError>{errors.email?.message}</FieldError>

Render FieldError only when there is an actual message to show.

How It Is Used

Like Label, FieldError is usually already handled for you by higher-level field components.

Use FieldError directly when:

• you are using InputPrimitive
• you are composing a custom field from Picker
• you need field-level validation UI for a nonstandard control

Props

All standard span HTML attributes are supported.

Styling Behavior

Default field-error styling includes:

• text-red-accent
• smaller text size than the field label
• medium font weight
• block layout with a small top margin
• left-aligned text

This makes it appropriate for inline validation directly below a form control.

When To Use FieldError Directly

Use FieldError directly when the field shell is custom and the higher-level control does not already expose an error prop.

Do not render both:

• a component's built-in error prop
• and an extra FieldError

for the same field message, unless you intentionally want duplicate output.

Guidelines

• Do use FieldError with custom primitive-based fields
• Do pass react-hook-form error strings directly when building custom controls
• Do keep error messages specific and actionable
• Don't show FieldError when there is no message
• Don't duplicate error output when a component already renders it from its error prop