mui · bharatkashyap · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024 · Jan 2, 2025
diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.js
@@ -35,7 +35,7 @@ export default function BrandingSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx
@@ -35,7 +35,7 @@ export default function BrandingSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/BrandingSignInPage.tsx.preview
@@ -15,6 +15,6 @@ const BRANDING = {
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.js
@@ -27,7 +27,7 @@ export default function CredentialsSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx
@@ -30,7 +30,7 @@ export default function CredentialsSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/CredentialsSignInPage.tsx.preview
@@ -6,6 +6,6 @@ const providers = [{ id: 'credentials', name: 'Email and Password' }];
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.js
@@ -27,7 +27,7 @@ export default function MagicLinkAlertSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx
@@ -36,7 +36,7 @@ export default function MagicLinkAlertSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/MagicLinkAlertSignInPage.tsx.preview
@@ -8,6 +8,6 @@ resolve({
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.js
@@ -32,7 +32,7 @@ export default function NotificationsSignInPageError() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx
@@ -39,7 +39,7 @@ export default function NotificationsSignInPageError() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/NotificationsSignInPageError.tsx.preview
@@ -9,6 +9,6 @@ resolve({
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.js
@@ -24,7 +24,7 @@ export default function PasskeySignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx
@@ -24,7 +24,7 @@ export default function PasskeySignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
-        slotProps={{ emailField: { autoFocus: false } }}
+        slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
       />
     </AppProvider>
     // preview-end

diff --git a/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/PasskeySignInPage.tsx.preview
@@ -6,6 +6,6 @@ const providers = [{ id: 'passkey', name: 'Passkey' }];
   <SignInPage
     signIn={signIn}
     providers={providers}
-    slotProps={{ emailField: { autoFocus: false } }}
+    slotProps={{ emailField: { autoFocus: false }, form: { noValidate: true } }}
   />
 </AppProvider>
diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { Remember, SignInPage } from '@toolpad/core/SignInPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];
@@ -16,7 +16,9 @@ export default function SlotPropsSignIn() {
             `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`,
           )
         }
+        slots={{ rememberMe: Remember }}
         slotProps={{
+          form: { noValidate: true },
           emailField: { variant: 'standard', autoFocus: false },
           passwordField: { variant: 'standard' },
           submitButton: { variant: 'outlined' },
@@ -26,7 +28,7 @@ export default function SlotPropsSignIn() {
                 name="tandc"
                 value="true"
                 color="primary"
-                sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
+                sx={{ py: 1, px: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
               />
             ),
             color: 'textSecondary',

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx b/docs/data/toolpad/core/components/sign-in-page/SlotPropsSignIn.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { Remember, SignInPage } from '@toolpad/core/SignInPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];
@@ -16,7 +16,9 @@ export default function SlotPropsSignIn() {
             `Signing in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')} and checkbox value: ${formData.get('tandc')}`,
           )
         }
+        slots={{ rememberMe: Remember }}
         slotProps={{
+          form: { noValidate: true },
           emailField: { variant: 'standard', autoFocus: false },
           passwordField: { variant: 'standard' },
           submitButton: { variant: 'outlined' },
@@ -26,7 +28,7 @@ export default function SlotPropsSignIn() {
                 name="tandc"
                 value="true"
                 color="primary"
-                sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
+                sx={{ py: 1, px: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
               />
             ),
             color: 'textSecondary',

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.js
@@ -2,8 +2,6 @@ import * as React from 'react';
 import {
   Button,
   FormControl,
-  FormControlLabel,
-  Checkbox,
   InputLabel,
   OutlinedInput,
   TextField,
@@ -16,7 +14,7 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage, Remember } from '@toolpad/core/SignInPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];
@@ -125,42 +123,20 @@ function Title() {
 
 function Subtitle() {
   return (
-    <Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
+    <Alert sx={{ mb: 2, px: 1, py: 0.25, width: '100%' }} severity="warning">
       We are investigating an ongoing outage.
     </Alert>
   );
 }
 
-function AgreeWithTerms() {
-  return (
-    <FormControlLabel
-      control={
-        <Checkbox
-          name="tandc"
-          value="true"
-          color="primary"
-          sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
-        />
-      }
-      slotProps={{
-        typography: {
-          fontSize: 14,
-        },
-      }}
-      color="textSecondary"
-      label="I agree with the T&C"
-    />
-  );
-}
-
 export default function SlotsSignIn() {
   const theme = useTheme();
   return (
     <AppProvider theme={theme}>
       <SignInPage
         signIn={(provider, formData) =>
           alert(
-            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('tandc')}`,
+            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('remember')}`,
           )
         }
         slots={{
@@ -170,9 +146,10 @@ export default function SlotsSignIn() {
           passwordField: CustomPasswordField,
           submitButton: CustomButton,
           signUpLink: SignUpLink,
-          rememberMe: AgreeWithTerms,
+          rememberMe: Remember,
           forgotPasswordLink: ForgotPasswordLink,
         }}
+        slotProps={{ form: { noValidate: true } }}
         providers={providers}
       />
     </AppProvider>

diff --git a/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx b/docs/data/toolpad/core/components/sign-in-page/SlotsSignIn.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 import {
   Button,
   FormControl,
-  FormControlLabel,
-  Checkbox,
   InputLabel,
   OutlinedInput,
   TextField,
@@ -16,7 +14,7 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { SignInPage } from '@toolpad/core/SignInPage';
+import { SignInPage, Remember } from '@toolpad/core/SignInPage';
 import { useTheme } from '@mui/material/styles';
 
 const providers = [{ id: 'credentials', name: 'Email and Password' }];
@@ -125,42 +123,20 @@ function Title() {
 
 function Subtitle() {
   return (
-    <Alert sx={{ mb: 2, px: 1, py: 0.25 }} severity="warning">
+    <Alert sx={{ mb: 2, px: 1, py: 0.25, width: '100%' }} severity="warning">
       We are investigating an ongoing outage.
     </Alert>
   );
 }
 
-function AgreeWithTerms() {
-  return (
-    <FormControlLabel
-      control={
-        <Checkbox
-          name="tandc"
-          value="true"
-          color="primary"
-          sx={{ padding: 0.5, '& .MuiSvgIcon-root': { fontSize: 20 } }}
-        />
-      }
-      slotProps={{
-        typography: {
-          fontSize: 14,
-        },
-      }}
-      color="textSecondary"
-      label="I agree with the T&C"
-    />
-  );
-}
-
 export default function SlotsSignIn() {
   const theme = useTheme();
   return (
     <AppProvider theme={theme}>
       <SignInPage
         signIn={(provider, formData) =>
           alert(
-            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('tandc')}`,
+            `Logging in with "${provider.name}" and credentials: ${formData.get('email')}, ${formData.get('password')}, and checkbox value: ${formData.get('remember')}`,
           )
         }
         slots={{
@@ -170,9 +146,10 @@ export default function SlotsSignIn() {
           passwordField: CustomPasswordField,
           submitButton: CustomButton,
           signUpLink: SignUpLink,
-          rememberMe: AgreeWithTerms,
+          rememberMe: Remember,
           forgotPasswordLink: ForgotPasswordLink,
         }}
+        slotProps={{ form: { noValidate: true } }}
         providers={providers}
       />
     </AppProvider>

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.js
@@ -44,6 +44,7 @@ export default function ThemeSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
+        slotProps={{ form: { noValidate: true } }}
         sx={{
           '& form > .MuiStack-root': {
             marginTop: '2rem',

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx
@@ -50,6 +50,7 @@ export default function ThemeSignInPage() {
       <SignInPage
         signIn={signIn}
         providers={providers}
+        slotProps={{ form: { noValidate: true } }}
         sx={{
           '& form > .MuiStack-root': {
             marginTop: '2rem',

diff --git a/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview b/docs/data/toolpad/core/components/sign-in-page/ThemeSignInPage.tsx.preview
@@ -15,6 +15,7 @@ const THEME = createTheme({
   <SignInPage
     signIn={signIn}
     providers={providers}
+    slotProps={{ form: { noValidate: true } }}
     sx={{
       '& form > .MuiStack-root': {
         marginTop: '2rem',

diff --git a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md
@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Sign-in Page
-components: SignInPage, Account, NotificationsProvider
+components: SignInPage, Account, Remember, NotificationsProvider
 ---
 
 # Sign-in Page
@@ -239,7 +239,7 @@ To enable deep customization beyond what is possible with custom props, the `Sig
 
 {{"demo": "SlotsSignIn.js", "iframe": true, "height": 540 }}
 
-You can use the `slotProps` prop to pass props to the underlying components of each slot:
+You can use the `slotProps` prop to pass props to the underlying components of each slot, and also to `form` element:
 
 {{"demo": "SlotPropsSignIn.js", "iframe": true, "height": 600 }}
 

diff --git a/docs/data/toolpad/core/pagesApi.js b/docs/data/toolpad/core/pagesApi.js
@@ -10,6 +10,7 @@ module.exports = [
   { pathname: '/toolpad/core/api/page-container' },
   { pathname: '/toolpad/core/api/page-header' },
   { pathname: '/toolpad/core/api/page-header-toolbar' },
+  { pathname: '/toolpad/core/api/remember' },
   { pathname: '/toolpad/core/api/sign-in-button' },
   { pathname: '/toolpad/core/api/sign-in-page' },
   { pathname: '/toolpad/core/api/sign-out-button' },