Validation
Html5 form validation and Constraint Validation API. You can disable form validation form[novalidate].
You can style validation classes with .valid-submit and .invalid-submit, you can also use the custom variants valid-submit: and invalid-submit:.
| Syntax | Mixin | Description | |
|---|---|---|---|
| Component | form[novalidate] | NOT POSSIBLE | Do not validate form |
| Component | .valid-submit | valid-submit | Validation valid class |
| Component | .invalid-submit | invalid-submit | Validation invalid class |
It automatically runs on form submit and automatically scrolls on the first invalid form item.
If you have custom backend validation on submit add also the class .invalid-submit, and you can add javascript to automatically scroll to the first validation element on page load.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Variable | Xt.formScrollWindowFactor:Number|false | 0.2 | A number from 0 to 1 of the window height factor to scroll to on validation |
Use border on all form elements if you want to show validation with border color.
Checks Custom
You can have custom design that contains the input[type="checkbox"] or input[type="radio"], just add the tag label and then you can use Tailwind CSS variants on:, group-on: to assign animations.
For accessibility purpose hide the input inside with
sr-only, don't assigndisplay: none.
For accessibility purposeyou can to apply focus-within styles to
label, or wait for focus-visible-within.
Use button with label to create checks with button.
Use card with label to create checks with card.
Loader
You can have a loader on forms automatically on submit injecting the loader with javascript, with no changes to markup.
Label addon
Use Tailwind CSS to create a label addon.