Inline validation
Also called live validation, real-time validation, or form validation
Form checking that happens right next to each field as you fill it in, showing an error or a checkmark before you press Submit.
import { useRef, useState } from 'react';
import { Field } from '@base-ui/react/field';
const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const PAUSE_MS = 500; // wait for a pause in typing before judging
export function EmailField() {
const [value, setValue] = useState('');
const [checking, setChecking] = useState(false);
const pause = useRef<ReturnType<typeof setTimeout>>(undefined);
const valid = EMAIL.test(value);
// Once checking starts, `valid` is re-derived on every keystroke,
// so the error clears the moment the address is fixed.
const invalid = checking && !valid;
return (
// `invalid` sets aria-invalid on the input; Field links the error with aria-describedby.
<Field.Root invalid={invalid} className='flex w-80 flex-col gap-1.5'>
<Field.Label className='text-sm font-medium'>Email</Field.Label>
<div className='relative'>
<Field.Control
type='email'
value={value}
onValueChange={(next) => {
setValue(next);
clearTimeout(pause.current);
if (next)
pause.current = setTimeout(() => setChecking(true), PAUSE_MS);
}}
onBlur={() => setChecking(value !== '')}
className='h-10 w-full rounded-lg border bg-background px-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring data-invalid:border-red-500 data-invalid:focus:ring-red-500/30'
/>
{checking && valid && (
<span
aria-hidden='true'
className='absolute top-2 right-3 text-emerald-600'
>
✓
</span>
)}
</div>
{/* Text, not just red, so the problem is clear without color. */}
<Field.Error match={invalid} className='text-sm text-red-600'>
Enter a valid email, like name@example.com
</Field.Error>
</Field.Root>
);
}Add inline validation to the signup email field. Check it when the field loses focus or 500ms after the user stops typing; when invalid, show a red border, an alert icon, and "Enter a valid email, like name@example.com" under the field, and when valid, show a green check inside the field. Once an error is visible, re-check on every keystroke, and link the message with aria-describedby and aria-invalid.
Paste into Layerwise or any AI coding tool.
What is Inline validation?
Inline validation checks a value where it is typed and shows the result right there: a red border with a short message like “Enter a valid email address”, or a green check when the value is good. People can fix a mistake while the field is still on their mind.
Timing matters. Wait until someone has finished typing before showing an error: check when they leave the field, or after a pause of about 500ms. Once an error is showing, check on every keystroke so it clears the moment the value is fixed.
Write messages that explain how to fix the problem and place them directly under the field. Connect them with aria-describedby and set aria-invalid="true" so screen readers announce them, and pair the red color with an icon or text so the error is clear without color.
Often confused with
- Alert banner
- An alert banner reports a problem with the whole page or form at the top. Inline validation points at the exact field that needs fixing.
Related terms
All termsDebounce
A technique that waits for a short pause in typing or other repeated events, then runs the work once instead of on every keystroke.
Shake animation
A quick side-to-side jiggle that tells someone their input was rejected, such as a wrong password or an invalid code.
Floating label
A form field whose label sits inside the input like a placeholder, then shrinks and moves to the top edge when you focus or type.
Alert banner
A colored strip in the page that delivers an important message, such as info, success, warning, or error, and stays until it is resolved or dismissed.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.