InputStatus

Overview

InputStatus renders a small icon that communicates the validation state of a form field. Three states are supported: valid (green check), invalid (orange warning), and error (red ×). Hovering the icon reveals message in a Tooltip.

Input uses InputStatus automatically when its status and statusMessage props are set. Use InputStatus directly only when you need to attach a validation indicator to a custom field that doesn't use Input.

Import

import { InputStatus } from '@unflow.io/ui/components/InputStatus';

Props

All standard HTMLSpanElement props are forwarded.

Variants

<InputStatus status="valid"   message="Your email address looks good." />
<InputStatus status="invalid" message="This value doesn't match the required format." />
<InputStatus status="error"   message="Something went wrong. Please try again." />

valid — green checkmark icon. Use after successful validation.

invalid — orange warning icon. Use for format or constraint violations.

error — red × icon. Use for server-side or critical errors.

Usage with Input

InputStatus is wired up automatically through Input's status and statusMessage props:

<Input
  name="email"
  label="Email"
  status="error"
  statusMessage="This email is already in use."
  value={value}
  onChange={handleChange}
/>

Custom icon slots

Override any state's icon via the slots prop:

<InputStatus
  status="valid"
  message="All good!"
  slots={{
    valid: <MyCustomCheckIcon />,
  }}
/>

Customization (slotProps)

Accessibility

• The icon is wrapped by a Tooltip — keyboard users can focus the icon to read the message.
• Each state has a distinct icon shape (not just color) so the state is perceivable without color.