diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js index da711d8..ba9568d 100644 --- a/docs/assets/scripts/docs.js +++ b/docs/assets/scripts/docs.js @@ -68,6 +68,10 @@ searchInput.addEventListener('input', (event) => { }); const focusSearch = () => setTimeout(() => searchInput.focus(), 50); +// Core: Form +const invalidInput = document.querySelector('#invalid-input'); +invalidInput.setCustomValidity("Invalid field."); + // Component: Toast const toast = document.querySelector('#toast'); const toggleToast = () => toast.classList.toggle('active'); diff --git a/docs/pages/core/form.md b/docs/pages/core/form.md index 0f2c65c..5059026 100644 --- a/docs/pages/core/form.md +++ b/docs/pages/core/form.md @@ -253,15 +253,12 @@ Buttons can also be created with several `` and ` Error - - - Valid - + Disabled @@ -273,9 +270,6 @@ Input fields can be disabled or their value can be valid or invalid on form subm Error -Valid - - Disabled diff --git a/src/core/_form.css b/src/core/_form.css index 06207e2..6ea3911 100644 --- a/src/core/_form.css +++ b/src/core/_form.css @@ -43,6 +43,9 @@ input, textarea, select { cursor: not-allowed; background-color: var(--color-bg-muted); } + &:invalid { + box-shadow: var(--color-alert) var(--shadow-border); + } } input[type="text"], input[type="password"],