[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Freact-form-validation-formik-yup":671,"blog-author-\u002Fblog\u002Freact-form-validation-formik-yup":1064,"i-material-symbols:arrow-back-rounded":1079},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1050,"date":1051,"description":1052,"draft":1053,"editorsPick":1053,"extension":1054,"featured":1053,"image":1055,"imageAlt":1056,"meta":1057,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1058,"seo":1059,"stem":1060,"tags":1061,"__hash__":1063},"blog\u002Fblog\u002Freact-form-validation-formik-yup.md","Integrating Formik & Yup for React Form Validation","Melvin Kosisochukwu","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-fullstack-application-with-next-js-and-mongodb\u002Fauthor.jpeg",null,"melvin-kosisochukwu",{"type":679,"value":680,"toc":1035},"minimark",[681,702,707,715,728,733,783,786,790,805,815,822,829,835,841,845,852,858,864,867,891,895,901,905,908,912,919,925,931,934,947,953,960,964,967,973,979,982,1006,1012,1020,1024,1027],[682,683,684,685,689,690,693,694,701],"p",{},"In software development, forms offer a way of receiving data from users before sending information to the server. The data obtained through these forms must be validated and checked for mistakes that might break the server or cause problems. For example, you might need to verify that a username contains the required characters, or that the ",[686,687,688],"code",{},"password"," field value and ",[686,691,692],{},"confirm-password"," field value match. In this article, we’ll examine how form validation in React Applications using two React form libraries: the Formik and Yup packages. To easily follow this article, fundamental knowledge of React is required. The code for the sample project we’ll be working with in this ",[695,696,700],"a",{"href":697,"rel":698},"https:\u002F\u002Fgithub.com\u002FMelvinManni\u002Freact-formik",[699],"nofollow","GitHub repository",".",[703,704,706],"h2",{"id":705},"what-are-formik-and-yup","What Are Formik and Yup?",[682,708,709,714],{},[695,710,713],{"href":711,"rel":712},"https:\u002F\u002Fformik.org\u002Fdocs\u002Foverview",[699],"Formik"," is a React\u002FReact Native package used for handling forms; it keeps track of form values, errors, and events, and handles form submissions. Formik eliminates the work involved in setting up a state for form fields, allowing you to focus more on other aspects of development.",[682,716,717,722,723,701],{},[695,718,721],{"href":719,"rel":720},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fyup",[699],"Yup"," is a JavaScript schema builder for validating or parsing values. It allows you to model complex or inter-dependent validations using built-in validators or custom validations using ",[695,724,727],{"href":725,"rel":726},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FRegular_Expressions",[699],"regular expressions",[729,730,732],"h3",{"id":731},"yup-schema","Yup Schema",[682,734,735,736,739,740,745,746,745,751,745,756,745,761,745,766,745,771,776,777,782],{},"The Yup schema allows you to create validation schema\u002Frules that values should follow. You can create a Yup validation schema by calling ",[686,737,738],{},"Yup.object().shape()",". You’ll pass the schema object as a parameter with the schema rules as the value for the field keys. The schema has different datatypes: ",[695,741,744],{"href":742,"rel":743},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#string",[699],"string",", ",[695,747,750],{"href":748,"rel":749},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#number",[699],"numbers",[695,752,755],{"href":753,"rel":754},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#date",[699],"date",[695,757,760],{"href":758,"rel":759},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#tuple",[699],"tuple",[695,762,765],{"href":763,"rel":764},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#array",[699],"arrays",[695,767,770],{"href":768,"rel":769},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#object",[699],"objects",[695,772,775],{"href":773,"rel":774},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#boolean",[699],"booleans",", and ",[695,778,781],{"href":779,"rel":780},"https:\u002F\u002Fgithub.com\u002Fjquense\u002Fyup#mixed",[699],"mixed",". The mixed method allows you to create a schema that matches all data types or the ones you configured. Next, you’ll learn about the different Yup validation in React methods you can apply to schema types.",[682,784,785],{},"Formik allows easy integration with Yup for validating form values and ensures that the submitted data is error-free and matches a predetermined schema. The following sections will cover how to use Formik and Yup to validate forms in a simple React Application.",[703,787,789],{"id":788},"create-a-react-app","Create a React App",[682,791,792,793,798,799,804],{},"To ",[695,794,797],{"href":795,"rel":796},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fcreate-react-app-alternatives",[699],"create a React app",", you’ll need to have ",[695,800,803],{"href":801,"rel":802},"https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002F",[699],"Node.js"," installed. In your terminal, run the following command:",[806,807,812],"pre",{"className":808,"code":810,"language":811},[809],"language-text","npx create-react-app react-formik\n","text",[686,813,810],{"__ignoreMap":814},"",[682,816,817],{},[695,818,821],{"href":819,"rel":820},"https:\u002F\u002Fmelvin.pieces.cloud\u002F?p=4c0941b4eb",[699],"Save this code",[682,823,824,825,828],{},"Once you create the application, update the ",[686,826,827],{},"App.css","file with the following styles:",[806,830,833],{"className":831,"code":832,"language":811},[809],"* {\n    outline: none;\n    transition: 0.3s ease all;\n}\n\nmain {\n    max-width: 1024px;\n    margin: auto;\n}\n\n.App {\n    background-color: #202020;\n    padding: 40px;\n    min-height: 100vh;\n}\n\n.App-logo {\n    pointer-events: none;\n    margin: 20px;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n    .App-logo {\n        animation: App-logo-spin infinite 20s linear;\n    }\n}\n\n.App-header {\n    margin-bottom: 45px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(10px + 2vmin);\n    color: white;\n    text-align: center;\n}\n\n.App-header img {\n    width: 150px;\n}\n\n.App-link {\n    color: #61dafb;\n}\n\n.styledInput {\n    margin-bottom: 25px;\n}\n\n.styledInput > input {\n    background: #fefefe;\n    border: 1px solid #8db2e2;\n    box-sizing: border-box;\n    border-radius: 4px;\n    height: 50px;\n    min-width: 100%;\n    max-width: max-content;\n    padding: 5px 15px;\n    padding-top: 0.7rem;\n    font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n    color: #242235;\n    font-style: normal;\n    font-size: 0.87rem;\n    line-height: 15px;\n}\n\n.styledInput > input:focus {\n    box-shadow: 1px 2px 4px #8db2e2;\n}\n\n.styledInput > input::placeholder {\n    color: #929292;\n    font-size: 14.4px;\n    font-family: \"Courier New\", Courier, monospace;\n    font-style: normal;\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.helperText {\n    color: #dc3545;\n    font-size: 12px;\n    min-height: 15px;\n    text-align: left;\n}\n\nbutton {\n    color: #fff;\n    background: #2f485​⬤\n",[686,834,832],{"__ignoreMap":814},[682,836,837],{},[695,838,821],{"href":839,"rel":840},"https:\u002F\u002Fmelvin.pieces.cloud\u002F?p=c07c49b6c3",[699],[703,842,844],{"id":843},"using-formik-and-yup-form-validation","Using Formik and Yup Form Validation",[682,846,847,848,851],{},"The ",[686,849,850],{},"App.js","file has a simple sign-up form controlled by Formik. In order to validate Forms in React, inject the Yup form validation schema into the Formik object:",[806,853,856],{"className":854,"code":855,"language":811},[809],"import logo from \".\u002Flogo.svg\";import { useFormik } from \"formik\";import * as Yup from \"yup\";import \".\u002FApp.css\";import StyledInput from \".\u002Fcomponents\u002FStyledInput\";import { useState } from \"react\";function App() {const [loading, setLoading] = useState(false);const validateSchema = Yup.object().shape({firstName: Yup.string().required(\"This field is required\"),lastName: Yup.string().notRequired(),email: Yup.string().email(\"Please enter a valid email\").required(\"This field is required\"),password: Yup.string().required(\"This field is required\").min(8, \"Pasword must be 8 or more characters\").matches(\u002F(?=.*[a-z])(?=.*[A-Z])\\w+\u002F, \"Password ahould contain at least one uppercase and lowercase character\").matches(\u002F\\d\u002F, \"Password should contain at least one number\").matches(\u002F[`!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.\u003C>\u002F?~]\u002F, \"Password should contain at least one special character\"),confirmPassword: Yup.string().when(\"password\", (password, field) => {if (password) {return field.required(\"The passwords do not match\").oneOf([Yup.ref(\"password\")], \"The passwords do not match\");}}),});const formik = useFormik({initialValues: {firstName: \"\",lastName: \"\",email: \"\",password: \"\",confirmPassword: \"\",},validationSchema: validateSchema,onSubmit: (values, { resetForm }) => {console.log(values);setLoading(true);setTimeout(() => {setLoading(false);resetForm();}, 1000 * 2);},});return (\u003Cdiv className=\"App\">\u003Cheader className=\"App-header\">\u003Cimg src={logo} className=\"App-logo\" alt=\"logo\" \u002F>\u003Ch4>Signup\u003C\u002Fh4>\u003C\u002Fheader>\u003Cmain>\u003Cform className=\"spaceY-lg w100-small w50-lg\" onSubmit={formik.handleSubmit}>\u003CStyledInputlabel=\"First Name\"name=\"firstName\"onChange={formik.handleChange}value={formik.values.firstName}type={\"text\"}helperText={formik.errors.firstName ? formik.errors.firstName : \"\"}\u002F>\u003CStyledInputlabel=\"Last Name\"type={\"text\"}name=\"lastName\"onChange={formik.handleChange}value={formik.values.lastName}helperText={formik.errors.lastName ? formik.errors.lastName : \"\"}\u002F>\u003CStyledInputlabel=\"Email Address\"type={\"email\"}name=\"email\"onChange={formik.handleChange}value={formik.values.email}helperText={formik.errors.email ? formik.errors.email : \"\"}\u002F>\u003CStyledInputlabel=\"Password\"type={\"password\"}name=\"password\"onChange={formik.handleChange}value={formik.values.password}helperText={formik.errors.password ? formik.errors.password : \"\"}\u002F>\u003CStyledInputlabel=\"Confirm Password\"type={\"password\"}name=\"confirmPassword\"onChange={formik.handleChange}value={formik.values.confirmPassword}helperText={formik.errors.confirmPassword ? formik.errors.confirmPassword : \"\"}\u002F>\u003Cbutton disabled={loading} type={\"submit\"}>{loading ? \"Loading...\" : \"Sign Up\"}\u003C\u002Fbutton>\u003C\u002Fform>\u003C\u002Fmain>\u003C\u002Fdiv>);}export default App;\n",[686,857,855],{"__ignoreMap":814},[682,859,860],{},[695,861,821],{"href":862,"rel":863},"https:\u002F\u002Fmelvin.pieces.cloud\u002F?p=a0c94fadf8",[699],[682,865,866],{},"In the code block above, we can see the Yup and Formik validation schema for the sign-up form on line 10. This creates a set of rules that each form field will follow.",[682,868,869,870,873,874,877,878,883,884,887,888,890],{},"On line 27, we have the ",[686,871,872],{},"useFormik"," hook with the initial values for the form state, the validation schema created with Yup and the ",[686,875,876],{},"onSubmit"," event for the form. Next, we linked the Formik values to the input fields. Using the First Name form field as a reference, we connected the field value from Formik to the value attribute and for the input to create a ",[695,879,882],{"href":880,"rel":881},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fforms.html#controlled-components",[699],"controlled component",". Finally, we passed the ",[686,885,886],{},"handleSubmit"," function from Formik to the ",[686,889,876],{}," event for the form.",[729,892,894],{"id":893},"validation-messages","Validation Messages",[682,896,897,898,701],{},"Validation messages are tips that help the user understand which characters are valid for a specific form field, making them incredibly useful in React form validation. In addition, they serve as a guide for the user in resolving form errors. Validation messages are accessible through Formik errors for each field. We can see this example on line 61. The First Name field validation message can be accessed from ",[686,899,900],{},"formik.errors.firstName",[729,902,904],{"id":903},"built-in-validators","Built-in Validators",[682,906,907],{},"Yup has some built-in validators that we can implement. As seen in the code block above, we used some built-in validators in the validation schema. As discussed in the previous section, there are different datatypes for a Yup Schema. For each data type, there are different validation methods that can be chained to it. An exception is a boolean datatype that can be either true or false.",[729,909,911],{"id":910},"custom-validations-regex","Custom Validations (RegEx)",[682,913,914,915,918],{},"We can create our custom validation rules by using the ",[686,916,917],{},"matches()","method for string schema. This accepts a regular expression and the validation message as a value:",[806,920,923],{"className":921,"code":922,"language":811},[809],"password: Yup.string().required(\"This field is required\").min(8, \"Pasword must be 8 or more characters\").matches(\u002F(?=.*[a-z])(?=.*[A-Z])\\w+\u002F, \"Password ahould contain at least one uppercase and lowercase character\").matches(\u002F\\d\u002F, \"Password should contain at least one number\").matches(\u002F[`!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.\u003C>\u002F?~]\u002F, \"Password should contain at least one specia\n",[686,924,922],{"__ignoreMap":814},[682,926,927],{},[695,928,821],{"href":929,"rel":930},"https:\u002F\u002Fmelvin.pieces.cloud\u002F?p=387d4d94a1",[699],[682,932,933],{},"The schema rule above will check if a value is a string and verify that the string value is not empty. Next, it will check to make sure that the minimum length for the string characters is eight. Finally, the following three validation rules for the value are customized using a regular expression:",[935,936,937,941,944],"ul",{},[938,939,940],"li",{},"The first expression checks if there is at least one uppercase letter and one lowercase letter in the string.",[938,942,943],{},"The second expression checks if the value contains at least one number.",[938,945,946],{},"The last expression checks if the value contains at least one special character.",[682,948,949,950,952],{},"This validation can be applied in real-life scenarios for creating a strong password, as seen in the code sample in the ",[686,951,850],{},"file:",[682,954,955],{},[956,957],"img",{"alt":958,"src":959},"gif that shows the react app sign up screen flow","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-form-validation-formik-yup\u002Fimg-001.gif",[729,961,963],{"id":962},"validating-a-dynamic-form-with-formik-and-yup","Validating a Dynamic Form with Formik and Yup",[682,965,966],{},"The Formik validation package also comes with built-in components that let us control the form state and events. In this section we’ll examine how to create a dynamic form using Formik form components and Yup. First, we’ll set up a form that allows us to create a list of items:",[806,968,971],{"className":969,"code":970,"language":811},[809],"import \".\u002Fstyles.css\";import * as yup from \"yup\";import { Field, FieldArray, Form, Formik } from \"formik\";import React from \"react\";export default function App() {const [list, setList] = React.useState([]);const validationSchema = yup.object().shape({items: yup.array().of(yup.string().required(\"This value is required\"))});return (\u003Cdiv className=\"App\">\u003CFormikinitialValues={{items: [\"\"]}}validationSchema={validationSchema}onSubmit={(values, { resetForm }) => {setList(values.items);setTimeout(() => {console.log(\"clean\");resetForm();}, 3000);}}>{({ values }) => (\u003CForm>{values.items.map((_, index) => (\u003CReact.Fragment key={index}>\u003CFieldArrayname=\"items\"render={(helpers) => (\u003Cdiv>\u003CField name={`items.${index}`}>{({field, \u002F\u002F { name, value, onChange, onBlur }form: { touched, errors }, \u002F\u002F also values, setXXXX, handleXXXX, dirty, isValid, status, etc.meta}) => (\u003Cdiv>\u003Cinputtype=\"text\"placeholder=\"Enter item...\"{...field}\u002F>{meta.touched && meta.error && (\u003Csmall className=\"error\">{meta.error}\u003C\u002Fsmall>)}\u003C\u002Fdiv>)}\u003C\u002FField>\u003Cdiv className=\"row\">\u003Cbuttondisabled={values.items.length === 1}onClick={() => {values.items.length > 1 && helpers.remove(index);}}type=\"button\"className=\"remove\">Remove\u003C\u002Fbutton>{values.items.length === index + 1 && (\u003Cbuttontype=\"button\"onClick={() => {helpers.push(\"\");}}className=\"add\">Add New Item\u003C\u002Fbutton>)}\u003C\u002Fdiv>\u003C\u002Fdiv>)}\u002F>\u003C\u002FReact.Fragment>))}\u003Cbutton type=\"submit\">Submit\u003C\u002Fbutton>\u003C\u002FForm>)}\u003C\u002FFormik>\u003Cdiv className=\"list-wrapper\">\u003Cul>{list.map((val) => (\u003Cli>{val}\u003C\u002Fli>))}\u003C\u002Ful>\u003C\u002Fdiv>\u003C\u002Fdiv>);}\n",[686,972,970],{"__ignoreMap":814},[682,974,975],{},[695,976,821],{"href":977,"rel":978},"https:\u002F\u002Fmelvin.pieces.cloud\u002F?p=49dd4e86ae",[699],[682,980,981],{},"In the code block above, we have the Yup schema, which is an array type of strings. As we can see from the Yup validation schema, the array values are required; we cannot have an empty string as an array value.",[682,983,984,985,987,988,991,992,994,995,997,998,1001,1002,1005],{},"Next, we imported the ",[686,986,713],{}," component from the Formik package; this wraps the form. Since we’re working with arrays\u002Fdynamic form values, we used the ",[686,989,990],{},"FieldArray"," component, which helps with array manipulations. On line 32, we have the ",[686,993,990],{},", which is used to render each form field and button. The render props from the ",[686,996,990],{}," had helper props passed to them. This prop allowed us to mutate the array values, as seen in the \"Add New Item\" button, where we used the ",[686,999,1000],{},"push()"," method from the helpers to add new values at the end of the array. Also, the \"remove\" button calls the ",[686,1003,1004],{},"remove()","method on click, with the item's index to remove passed as a parameter:",[682,1007,1008],{},[956,1009],{"alt":1010,"src":1011},"form inputs where users can remove and add new items","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-form-validation-formik-yup\u002Fimg-002.gif",[682,1013,1014,1015,701],{},"Finally, to test your dynamic form, you can use the code sample in this ",[695,1016,1019],{"href":1017,"rel":1018},"https:\u002F\u002Fcodesandbox.io\u002Fs\u002F3h5o32",[699],"codesandbox",[703,1021,1023],{"id":1022},"conclusion","Conclusion",[682,1025,1026],{},"Formik and Yup provide a great way to manage form state and validate values in a form before sending data to the server. They provide a lot of flexibility and ease when creating forms. You can also utilize the Formik form components or hooks to handle your forms in a React application.",[682,1028,1029,1030,701],{},"For additional information on using Formik and Yup, check the ",[695,1031,1034],{"href":1032,"rel":1033},"https:\u002F\u002Fformik.org\u002Fdocs\u002Fexamples\u002Fbasic",[699],"official documentation",{"title":814,"searchDepth":1036,"depth":1036,"links":1037},2,[1038,1042,1043,1049],{"id":705,"depth":1036,"text":706,"children":1039},[1040],{"id":731,"depth":1041,"text":732},3,{"id":788,"depth":1036,"text":789},{"id":843,"depth":1036,"text":844,"children":1044},[1045,1046,1047,1048],{"id":893,"depth":1041,"text":894},{"id":903,"depth":1041,"text":904},{"id":910,"depth":1041,"text":911},{"id":962,"depth":1041,"text":963},{"id":1022,"depth":1036,"text":1023},"Software Development","2023-01-02T00:00:00.000Z","In this article, we’ll examine React form validation using the Formik and Yup packages. These libraries make it much easier to deal with forms in React!",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-form-validation-formik-yup\u002Fhero.jpeg","decorative cover image showing yup and formik logos",{},"\u002Fblog\u002Freact-form-validation-formik-yup",{"title":673,"description":1052},"blog\u002Freact-form-validation-formik-yup",[1062],"react-7; validation","f5fT5OugcQ-BAPy8wnzvtV7Tr0u0GsMbpM3XypkjWpM",{"id":1065,"title":674,"body":1066,"description":1070,"draft":1053,"extension":1054,"meta":1073,"navigation":32,"path":1074,"photo":1075,"photoAlt":676,"seo":1076,"stem":1077,"__hash__":1078},"authors\u002Fauthors\u002Fmelvin-kosisochukwu.md",{"type":679,"value":1067,"toc":1071},[1068],[682,1069,1070],{},"Melvin is a JavaScript Engineer, technical writer, blockchain enthusiast, and gamer. A JavaScript lover and an individual who wants to share knowledge.",{"title":814,"searchDepth":1036,"depth":1036,"links":1072},[],{},"\u002Fauthors\u002Fmelvin-kosisochukwu","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fmelvin-kosisochukwu.jpg",{"title":674,"description":1070},"authors\u002Fmelvin-kosisochukwu","XyP4TmRG3-qr_lWfz9E2PFniwdKm6-F5bI_AHLoO1Ss",{"left":1080,"top":1080,"width":1081,"height":1081,"rotate":1080,"vFlip":1053,"hFlip":1053,"body":1082},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]