Validation

Native validation

Controls that break their required, type, pattern or length rules turn red with an icon. Iris uses :user-invalid, so a field only turns red after the user has changed it or tried to submit. Type a few letters below, then clear the field.

Server side checks

For checks the browser cannot make, set aria-invalid yourself. "true" marks an error and "false" a field that passed. Screen readers announce the error too.

Helper text

A small right after the control follows its state: green when it is valid and red when it is not. It works after a fieldset or a .grid too.

Selects, textareas and checkboxes

Variables

The valid and invalid colors are the --i-input-valid- and --i-input-invalid- variables on the controls page. The icons are --i-svg-valid and --i-svg-invalid. Their colors are baked into the SVG, since inputs cannot draw a masked icon, so replace them when you change --i-color-success or --i-color-danger.