Pico surfaces valid and invalid fields with aria-invalid—set to "true" or "false" after your validation runs. Matching <small> helper text below the control inherits success or error colors.
Server vs client validation
Pico does not run validators. In production, set aria-invalid from server-side errors or accessible client-side logic after submit or blur. Pair errors with visible text—never rely on border color alone.
Native constraints
HTML5 attributes like required, minlength, and pattern still matter; Pico styles the control once the browser or your script marks the field invalid. Compare with Bootstrap validation classes, which use is-invalid on wrappers instead of ARIA on the input.
Important interview questions and answers
- Q: How does Pico show errors without utility classes?
A:aria-invalid="true"on the control triggers Pico’s invalid border and icon treatment; helpersmalltext picks up the error color. - Q: Does Pico replace HTML5 validation?
A: No—it styles outcomes; you still validate on the server and expose readable error messages.
Self-check
- Which attribute toggles Pico’s invalid styling?
- Where should the human-readable error message live?