(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{CafY:function(e,t,l){"use strict";var c=l("q1tI"),o=l.n(c),r=l("cv3Q"),n=Object(c.createContext)(),a=l("CoLn"),i=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/components")},{title:"Common Props",href:"".concat("/components","/common-props")},{title:"Theming",href:"".concat("/components","/theming")},{title:"Responsive Styling",href:"".concat("/components","/responsive")}]},{name:"Components",routes:[{title:"Alerts",href:"".concat("/components","/alerts")},{title:"Box",href:"".concat("/components","/box")},{title:"Buttons",href:"".concat("/components","/buttons")},{title:"Cards",href:"".concat("/components","/cards")},{title:"Checkbox",href:"".concat("/components","/checkbox")},{title:"Dropdown",href:"".concat("/components","/dropdown")},{title:"Flex",href:"".concat("/components","/flex")},{title:"Grid",href:"".concat("/components","/grid")},{title:"Links",href:"".concat("/components","/links")},{title:"Icons",href:"".concat("/components","/icons")},{title:"Heading",href:"".concat("/components","/heading")},{title:"Radio",href:"".concat("/components","/radio")},{title:"Tables",href:"".concat("/components","/tables")},{title:"Tags",href:"".concat("/components","/tags")},{title:"Text",href:"".concat("/components","/text")},{title:"TextField",href:"".concat("/components","/text-field")}]}],b=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/design")}]},{name:"Base",routes:[{title:"Colors",href:"".concat("/design","/colors")},{title:"Typography",href:"".concat("/design","/typography")},{title:"Logos",href:"".concat("/design","/logos")},{title:"Spacing",href:"".concat("/design","/spacing")},{title:"Breakpoints",href:"".concat("/design","/breakpoints")}]},{name:"UI Patterns",routes:[{title:"Alerts",href:"".concat("/design","/alerts")},{title:"Buttons",href:"".concat("/design","/buttons")},{title:"Cards",href:"".concat("/design","/cards")},{title:"File Upload",href:"".concat("/design","/file-upload")},{title:"Forms",href:"".concat("/design","/forms")},{title:"Form Selections",href:"".concat("/design","/form-selections")},{title:"Tables",href:"".concat("/design","/tables")},{title:"Tags",href:"".concat("/design","/tags")},{title:"Text Fields",href:"".concat("/design","/text-fields")}]}],h=o.a.createElement,p=function(e,t){return h(o.a.Fragment,null,h(r.Text,{type:"body",fontWeight:"700",as:"p",m:"24px 0 8px 0"},e.name),e.routes.map((function(e){return h(r.Text,{key:e.title,as:"p",m:"5px 0",fontWeight:t===e.title?"700":"500"},h(r.Link,{href:e.href},e.title))})))},s=function(e){var t=e.children,l=e.innerRef,c=e.type,o=e.title;return h(r.Flex,{flexShrink:"0",height:"100%",flexDirection:"column",ref:l,width:"280px",pb:"md",pr:"sm",pl:"sm"},t,function(e,t){return"components"===e?i.map((function(e){return p(e,t)})):"design"===e?b.map((function(e){return p(e,t)})):null}(c,o))},d=l("ZHh6"),m=l("Y5X5"),f=o.a.createElement;t.a=function(e){return function(t){var l=t.children;return f(n.Provider,{value:{label:"".concat(e.type)}},f(d.a,{title:e.title}),f(m.a,null),f(r.Flex,{flexWrap:"wrap",m:"10px auto",maxWidth:"1200px"},f(s,{type:e.type,title:e.title}),f(r.Flex,{height:"100%",paddingBottom:"lg",flexDirection:"column",width:["100%","100%","calc(100% - 300px)"],maxWidth:"800px",m:"0 20px"},f(a.a,null,f(r.Heading,{mb:"0px",mt:"0px",type:"h2"},e.title),f("main",null,l)))))}}},Ziot:function(e,t,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design/forms",function(){return l("nDwN")}])},bv6s:function(e,t,l){"use strict";var c=l("wx14"),o=l("Ff2n"),r=l("q1tI"),n=l.n(r),a=l("cv3Q"),i=n.a.createElement;t.a=function(e){var t=e.children,l=Object(o.a)(e,["children"]);return i(a.Flex,Object(c.a)({flex:["0 0 100%",1]},l),t)}},m6vX:function(e,t,l){"use strict";var c=l("wx14"),o=l("Ff2n"),r=l("q1tI"),n=l.n(r),a=l("cv3Q"),i=n.a.createElement;t.a=function(e){var t=e.children,l=Object(o.a)(e,["children"]);return i(a.Flex,Object(c.a)({flexWrap:"wrap"},l),t)}},nDwN:function(e,t,l){"use strict";l.r(t),l.d(t,"meta",(function(){return u})),l.d(t,"default",(function(){return v}));var c=l("wx14"),o=l("Ff2n"),r=l("rePB"),n=l("q1tI"),a=l.n(n),i=l("7ljp"),b=l("cv3Q"),h=l("m6vX"),p=l("bv6s"),s=l("IuJO"),d=l("CafY");a.a.createElement;function m(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,c)}return l}var f=function(e){return Object(i.b)("svg",e,Object(i.b)("path",{fill:"#FCFCFC",d:"M0 0h444v333H0zM526 14h261v282H526z"}),Object(i.b)("rect",{x:"56",y:"54",width:"333",height:"232",rx:"4",fill:"#fff",filter:"url(#a)"}),Object(i.b)("rect",{x:"571",y:"42",width:"156",height:"224",rx:"4",fill:"#fff",filter:"url(#b)"}),Object(i.b)("path",{d:"M593.692 97.5h34.616M593.692 129.5h34.616M593.692 179.5h34.616M608.692 194.5h34.616M608.692 208h34.616M608.692 220.5h34.616M608.692 232.5h34.616",stroke:"#656565",strokeLinecap:"square",strokeLinejoin:"round"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M597.5 199a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM597.5 211a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM597.5 223a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM597.5 236a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z",fill:"#fff",stroke:"#656565"}),Object(i.b)("rect",{x:"594",y:"104",width:"114",height:"14",rx:"2",fill:"#fff",stroke:"#656565"}),Object(i.b)("rect",{x:"594",y:"136",width:"114",height:"32",rx:"2",fill:"#fff",stroke:"#656565"}),Object(i.b)("path",{d:"M591.171 83h.976l.479-1.35h2.58l.474 1.35h.963l-2.391-6.21h-.677L591.171 83zm1.754-2.136l.993-2.76.984 2.76h-1.977zm9.208 2.224c.831 0 1.468-.457 1.741-1.23l-.761-.304a.99.99 0 0 1-.988.765c-.84 0-1.134-.77-1.134-1.508 0-.729.303-1.502 1.134-1.502.483 0 .865.28.988.764l.809-.33c-.321-.738-.967-1.208-1.797-1.208-1.345 0-2.004 1.112-2.004 2.276 0 1.178.668 2.277 2.012 2.277zm4.743 0c1.292 0 2.162-1.02 2.162-2.268 0-1.243-.87-2.267-2.162-2.267-1.296 0-2.158 1.024-2.158 2.267 0 1.248.862 2.268 2.158 2.268zm0-.743c-.892 0-1.244-.72-1.244-1.525 0-.804.352-1.525 1.244-1.525.905 0 1.248.721 1.248 1.525 0 .805-.343 1.525-1.248 1.525zm5.222.743c1.292 0 2.162-1.02 2.162-2.268 0-1.243-.87-2.267-2.162-2.267-1.297 0-2.158 1.024-2.158 2.267 0 1.248.861 2.268 2.158 2.268zm0-.743c-.892 0-1.244-.72-1.244-1.525 0-.804.352-1.525 1.244-1.525.905 0 1.248.721 1.248 1.525 0 .805-.343 1.525-1.248 1.525zm4.255.743c.215 0 .496-.044.677-.088v-.703c-.106.022-.26.035-.352.035a.275.275 0 0 1-.294-.268v-5.273h-.853v5.33c0 .646.22.967.822.967zm4.796-.088h.866v-3.683h1.151v-.707h-1.151v-.686c0-.29.233-.466.527-.466.242 0 .405.106.405.106l.25-.69a1.78 1.78 0 0 0-.747-.176c-.707 0-1.296.422-1.296 1.204v.717h-.809v.698h.804V83zm4.831.088c1.292 0 2.162-1.02 2.162-2.268 0-1.243-.87-2.267-2.162-2.267-1.296 0-2.158 1.024-2.158 2.267 0 1.248.862 2.268 2.158 2.268zm0-.743c-.892 0-1.244-.72-1.244-1.525 0-.804.352-1.525 1.244-1.525.905 0 1.248.721 1.248 1.525 0 .805-.343 1.525-1.248 1.525zm3.446.655h.84v-1.947c0-.953.408-1.731 1.12-1.731.207 0 .378.048.523.176l.347-.712c-.219-.167-.571-.242-.826-.242-.444 0-.984.277-1.156.861v-.795h-.848V83zm3.816 0h.861v-2.46c0-.66.369-1.249 1.024-1.249.659 0 .822.567.822 1.134V83h.861v-2.46c0-.66.369-1.249 1.024-1.249.664 0 .831.585.831 1.151V83h.865v-2.654c0-.945-.461-1.81-1.577-1.81-.585 0-1.095.267-1.402.781-.251-.527-.708-.79-1.305-.79-.466 0-.914.245-1.143.698v-.615h-.861V83z",fill:"#525151"}),Object(i.b)("path",{d:"M593.125 59.5h115.75",stroke:"#EBEEF2",strokeWidth:"2",strokeLinecap:"square"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M669.5 62a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM708.5 62a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",fill:"#fff",stroke:"#155DA1",strokeWidth:".5"}),Object(i.b)("path",{d:"M593.124 59.5h37.752",stroke:"#155DA1",strokeWidth:"2",strokeLinecap:"square"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M591.5 62a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",fill:"#155DA1",stroke:"#155DA1"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M630.5 62a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",fill:"#155DA1",stroke:"#155DA1",strokeWidth:".5"}),Object(i.b)("path",{fill:"#155DA1",stroke:"#155DA1",d:"M689 245h19v8h-19z"}),Object(i.b)("path",{fill:"#fff",stroke:"#155DA1",d:"M666 245h19v8h-19z"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M591.5 61a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",fill:"#155DA1",stroke:"#fff",strokeWidth:".5"}),Object(i.b)("path",{d:"M592.5 59.5l1-1",stroke:"#155DA1",strokeLinecap:"square"}),Object(i.b)("path",{d:"M591.7 60.25l2.3-2.344M590.7 59.25l1 1",stroke:"#fff",strokeWidth:".25",strokeLinecap:"square"}),Object(i.b)("path",{d:"M78.772 94h1.415V82.732h4.184v-1.15h-9.79v1.15h4.191V94zm9.59.106c1.407 0 2.4-.387 3.367-1.354l-.897-.72c-.685.72-1.441.913-2.487.913-1.696 0-2.567-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.39-.87-4.614-3.744-4.614-2.522 0-3.797 2.197-3.797 4.552 0 2.39 1.292 4.448 3.947 4.448zm-2.566-5.125c.062-1.485.826-2.707 2.417-2.707 1.688 0 2.496 1.117 2.487 2.707h-4.904zM93.48 94h1.6l2.047-3.322L99.192 94h1.555l-2.918-4.43 2.918-4.35h-1.555l-2.066 3.252-2.047-3.252h-1.6l2.962 4.35L93.479 94zm11.937.176c.536 0 .984-.097 1.177-.176v-1.125a2.06 2.06 0 0 1-.879.22c-.641 0-1.133-.448-1.133-1.415v-5.353h2.25V85.22h-2.25v-3.208l-1.31 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.589 2.505 2.145 2.505zm9.591-.176h1.23v-7.708h3.305V94h1.195v-8.78h-4.5c0-1.45.396-2.707 1.987-2.707.632 0 1.186.193 1.81.852l.633-.931c-.703-.827-1.793-1.037-2.575-1.037-2.294 0-3.068 1.836-3.068 3.823h-1.309v1.072h1.292V94zm12.49.106c1.407 0 2.4-.387 3.366-1.354l-.896-.72c-.686.72-1.441.913-2.487.913-1.697 0-2.567-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.39-.87-4.614-3.744-4.614-2.523 0-3.797 2.197-3.797 4.552 0 2.39 1.292 4.448 3.946 4.448zm-2.566-5.125c.061-1.485.826-2.707 2.417-2.707 1.687 0 2.496 1.117 2.487 2.707h-4.904zm10.486 4.052c-.404 0-.439-.474-.439-.5V81.58h-1.318v10.644c0 1.063.087 1.95 1.423 1.95.44 0 .897-.087 1.178-.175v-1.055a5.185 5.185 0 0 1-.844.088zm8.799-11.452v4.834c-.58-.844-1.467-1.38-2.742-1.38-2.241 0-3.515 2.057-3.515 4.57 0 2.505 1.274 4.57 3.524 4.57 1.318 0 2.171-.562 2.742-1.397l.027 1.222h1.283V81.581h-1.319zm-2.399 11.4c-1.767 0-2.522-1.583-2.522-3.375 0-1.776.755-3.358 2.522-3.358 1.793 0 2.514 1.582 2.514 3.358 0 1.801-.721 3.375-2.514 3.375zm13.942.052c-.405 0-.44-.474-.44-.5V81.58h-1.318v10.644c0 1.063.088 1.95 1.424 1.95a4.28 4.28 0 0 0 1.178-.175v-1.055a5.198 5.198 0 0 1-.844.088zm5.23 1.143c1.249 0 2.444-.554 3.085-1.872l.027 1.696h1.116v-5.388c0-2.135-1.204-3.542-3.437-3.542-1.45 0-2.531.598-3.313 1.688l.958.747c.422-.607 1.178-1.292 2.435-1.292 1.59 0 2.153 1.116 2.153 2.768H162c-2.487 0-3.885.818-3.885 2.576 0 1.652 1.222 2.619 2.874 2.619zm.15-1.108c-.914 0-1.661-.43-1.661-1.476 0-1.17.914-1.617 2.654-1.617h1.881c0 1.415-1.072 3.093-2.874 3.093zm11.225 1.108c2.285 0 3.524-2.066 3.524-4.57 0-2.505-1.239-4.588-3.533-4.588-1.283 0-2.162.58-2.725 1.397v-4.834h-1.309V94h1.309v-1.195c.563.826 1.45 1.37 2.734 1.37zm-.343-1.152c-1.767 0-2.505-1.626-2.505-3.418 0-1.776.738-3.428 2.505-3.428 1.766 0 2.558 1.652 2.558 3.428 0 1.792-.792 3.418-2.558 3.418zm9.801 1.082c1.406 0 2.399-.387 3.366-1.354l-.896-.72c-.686.72-1.442.913-2.488.913-1.696 0-2.566-1.336-2.549-2.891h6.118s.044-.229.044-.334c0-2.39-.871-4.614-3.745-4.614-2.522 0-3.796 2.197-3.796 4.552 0 2.39 1.292 4.448 3.946 4.448zm-2.567-5.125c.062-1.485.827-2.707 2.417-2.707 1.688 0 2.497 1.117 2.488 2.707h-4.905zm10.487 4.052c-.404 0-.439-.474-.439-.5V81.58h-1.319v10.644c0 1.063.088 1.95 1.424 1.95a4.28 4.28 0 0 0 1.178-.175v-1.055a5.198 5.198 0 0 1-.844.088z",fill:"#272A2D"}),Object(i.b)("path",{stroke:"#D35FC9",strokeWidth:"2",strokeDasharray:"6",d:"M97 184h261v71H97z"}),Object(i.b)("path",{stroke:"#D35FC9",strokeWidth:"2",strokeDasharray:"4",d:"M657 237h59v23h-59z"}),Object(i.b)("rect",{x:"75",y:"111",width:"273",height:"44",rx:"4",fill:"#fff",stroke:"#8B9199"}),Object(i.b)("path",{d:"M85.89 138h1.397v-5.607h2.092c2.408 0 3.973-1.196 3.973-3.384 0-2.136-1.565-3.428-3.973-3.428h-3.49V138zm1.397-6.847v-4.333h2.092c1.652 0 2.593.809 2.593 2.189 0 1.432-.94 2.144-2.593 2.144h-2.092zm10.416 5.88c-.404 0-.44-.474-.44-.501v-10.951h-1.318v10.644c0 1.063.088 1.951 1.424 1.951.44 0 .897-.088 1.178-.176v-1.055a5.211 5.211 0 0 1-.844.088zm5.231 1.143c1.248 0 2.443-.554 3.085-1.872l.026 1.696h1.117v-5.388c0-2.135-1.205-3.542-3.437-3.542-1.45 0-2.531.598-3.313 1.688l.958.747c.421-.607 1.177-1.292 2.434-1.292 1.591 0 2.153 1.116 2.153 2.768h-2.012c-2.488 0-3.885.818-3.885 2.576 0 1.652 1.222 2.619 2.874 2.619zm.149-1.108c-.914 0-1.661-.43-1.661-1.476 0-1.169.914-1.617 2.655-1.617h1.88c0 1.415-1.072 3.093-2.874 3.093zm10.32 1.108c1.591 0 2.786-.87 3.305-2.329l-1.143-.493c-.264 1.038-1.116 1.706-2.18 1.706-1.837 0-2.452-1.829-2.452-3.437 0-1.582.633-3.428 2.452-3.428 1.055 0 1.916.642 2.18 1.705l1.248-.527c-.624-1.415-1.837-2.303-3.428-2.303-2.531 0-3.797 2.198-3.797 4.553 0 2.382 1.284 4.553 3.815 4.553zm9.027-.071c1.407 0 2.4-.386 3.367-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.696 0-2.567-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.391-.87-4.615-3.744-4.615-2.522 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.946 4.447zm-2.566-5.124c.062-1.485.826-2.707 2.417-2.707 1.688 0 2.496 1.117 2.487 2.707h-4.904zm8.755 5.019h1.292v-4.808c0-1.546 1.16-2.882 2.663-2.882 1.477 0 1.82 1.292 1.82 2.487V138h1.327v-5.414c0-1.872-.844-3.516-2.953-3.516-1.134 0-2.268.624-2.857 1.591v-5.08h-1.292V138zm13.642.176c2.452 0 4.166-2.03 4.166-4.535 0-2.496-1.714-4.536-4.166-4.536-2.487 0-4.157 2.04-4.157 4.536 0 2.505 1.67 4.535 4.157 4.535zm0-1.16c-1.942 0-2.69-1.618-2.69-3.375 0-1.758.748-3.367 2.69-3.367 1.96 0 2.698 1.609 2.698 3.367 0 1.757-.738 3.375-2.698 3.375zm8.5.017c-.404 0-.439-.474-.439-.501v-10.951h-1.319v10.644c0 1.063.088 1.951 1.424 1.951.44 0 .897-.088 1.178-.176v-1.055a5.207 5.207 0 0 1-.844.088zm8.799-11.452v4.834c-.58-.844-1.468-1.38-2.742-1.38-2.241 0-3.516 2.057-3.516 4.57 0 2.505 1.275 4.571 3.525 4.571 1.318 0 2.171-.563 2.742-1.398l.026 1.222h1.284v-12.419h-1.319zm-2.399 11.399c-1.767 0-2.523-1.582-2.523-3.375 0-1.775.756-3.357 2.523-3.357 1.793 0 2.513 1.582 2.513 3.357 0 1.802-.72 3.375-2.513 3.375zm10.275 1.125c1.407 0 2.4-.386 3.367-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.697 0-2.567-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.391-.87-4.615-3.744-4.615-2.523 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.946 4.447zm-2.566-5.124c.061-1.485.826-2.707 2.417-2.707 1.687 0 2.496 1.117 2.487 2.707h-4.904zm8.737 5.019h1.319v-3.735c0-2.215.817-4.052 2.426-4.052.369 0 .791.105 1.116.395l.457-1.116c-.378-.272-1.037-.404-1.486-.404-1.01 0-2.206.677-2.496 1.837v-1.705h-1.336V138zm14.944.176c.536 0 .985-.097 1.178-.176v-1.125c-.273.132-.58.22-.879.22-.642 0-1.134-.449-1.134-1.415v-5.353h2.25v-1.107h-2.25v-3.208l-1.309 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.589 2.505 2.144 2.505zm7.068-.071c1.406 0 2.399-.386 3.366-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.696 0-2.566-1.336-2.549-2.891h6.118s.043-.229.043-.334c0-2.391-.87-4.615-3.744-4.615-2.522 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.947 4.447zm-2.567-5.124c.062-1.485.827-2.707 2.417-2.707 1.688 0 2.496 1.117 2.488 2.707h-4.905zm7.683 5.019h1.6l2.048-3.322 2.065 3.322h1.556l-2.918-4.43 2.918-4.35h-1.556l-2.065 3.252-2.048-3.252h-1.6l2.962 4.35-2.962 4.43zm11.937.176c.536 0 .984-.097 1.178-.176v-1.125c-.273.132-.58.22-.879.22-.642 0-1.134-.449-1.134-1.415v-5.353h2.25v-1.107h-2.25v-3.208l-1.31 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.589 2.505 2.145 2.505z",fill:"#8B9199"}),Object(i.b)("rect",{x:"108",y:"195",width:"112",height:"48",rx:"13",fill:"#fff",stroke:"#155DA1",strokeWidth:"2"}),Object(i.b)("path",{d:"M148.058 214.396c.457 0 .877.107 1.26.322.383.205.686.49.91.854.233.355.35.747.35 1.176 0 .653-.154 1.157-.462 1.512-.308.355-.7.597-1.176.728v.07a2.48 2.48 0 0 1 1.316.714c.364.373.546.929.546 1.666 0 .467-.121.896-.364 1.288a2.583 2.583 0 0 1-.966.938 2.682 2.682 0 0 1-1.33.336h-4.844v-9.604h4.76zm-.616 3.892c.28 0 .527-.107.742-.322a1.1 1.1 0 0 0 .322-.812c0-.392-.107-.672-.322-.84a1.134 1.134 0 0 0-.742-.266h-2.1v2.24h2.1zm.154 3.976c.308 0 .569-.107.784-.322.215-.215.322-.476.322-.784v-.126c0-.308-.107-.569-.322-.784a1.066 1.066 0 0 0-.784-.322h-2.254v2.338h2.254zm12.325-.154h-3.822l-.672 1.89h-2.086l3.486-9.604h2.576l3.486 9.604h-2.268l-.7-1.89zm-3.234-1.638h2.66c-.354-1.055-.784-2.31-1.288-3.766h-.07l-1.302 3.766zm11.164-.28c0 .709.191 1.26.574 1.652.383.383.868.574 1.456.574.663 0 1.153-.177 1.47-.532.317-.364.476-.919.476-1.666h1.974c0 .821-.168 1.531-.504 2.128a3.304 3.304 0 0 1-1.358 1.344c-.579.299-1.232.448-1.96.448h-.196c-.803 0-1.521-.163-2.156-.49a3.593 3.593 0 0 1-1.498-1.442c-.364-.644-.546-1.419-.546-2.324v-1.372c0-.877.182-1.638.546-2.282a3.688 3.688 0 0 1 1.484-1.47 4.447 4.447 0 0 1 2.114-.504h.196c.747 0 1.409.149 1.988.448.588.289 1.05.733 1.386 1.33.336.588.504 1.311.504 2.17h-2.058c0-.728-.163-1.279-.49-1.652-.317-.383-.779-.574-1.386-.574-.588 0-1.073.196-1.456.588-.373.383-.56.929-.56 1.638v1.988zm11.739-5.796v4.396l3.458-4.396h2.422l-3.234 4.046c.793 1.325 1.25 2.091 1.372 2.296l1.96 3.262h-2.45l-2.282-3.892-1.246 1.386V224h-2.114v-9.604h2.114z",fill:"#155DA1"}),Object(i.b)("rect",{x:"240",y:"195",width:"108",height:"48",rx:"13",fill:"#155DA1"}),Object(i.b)("path",{d:"M277.281 219.576a15.328 15.328 0 0 1-.42-.658l-.35-.588-.056.042V224h-1.974v-9.604h1.834l3.024 4.452.42.658c.149.261.266.453.35.574l.042-.042v-5.642h1.974V224h-1.834l-3.01-4.424zM286.16 224v-9.604h6.762l-.238 1.722h-4.396v2.1h4.102v1.722h-4.102v2.338h4.438l.238 1.722h-6.804zm12.608-5.04l-2.94-4.564h2.534l1.82 2.94h.056c.952-1.437 1.572-2.417 1.862-2.94h2.338l-1.12 1.736c-.551.859-1.162 1.792-1.834 2.8.644.999 1.288 2.002 1.932 3.01.644.999 1.082 1.685 1.316 2.058h-2.534l-2.128-3.43h-.056c-1.204 1.857-1.923 3.001-2.156 3.43h-2.338l3.248-5.04zm12.936-2.828V224h-2.142v-7.868h-2.73v-1.736h7.588v1.736h-2.716z",fill:"#fff"}),Object(i.b)("path",{d:"M508 249l148.5.5M508.5 248.5v-37M359.5 211.5h149",stroke:"#D35FC9",strokeWidth:"2",strokeLinecap:"square",strokeDasharray:"6"}),Object(i.b)("defs",null,Object(i.b)("filter",{id:"a",x:"52",y:"52",width:"341",height:"240",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},Object(i.b)("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Object(i.b)("feColorMatrix",{in:"SourceAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),Object(i.b)("feOffset",{dy:"2"}),Object(i.b)("feGaussianBlur",{stdDeviation:"2"}),Object(i.b)("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.153109 0"}),Object(i.b)("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Object(i.b)("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})),Object(i.b)("filter",{id:"b",x:"567",y:"40",width:"164",height:"232",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},Object(i.b)("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Object(i.b)("feColorMatrix",{in:"SourceAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),Object(i.b)("feOffset",{dy:"2"}),Object(i.b)("feGaussianBlur",{stdDeviation:"2"}),Object(i.b)("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.153109 0"}),Object(i.b)("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Object(i.b)("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"}))))};f.defaultProps={width:"787",height:"333",viewBox:"0 0 787 333",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var x=function(e){return Object(i.b)("svg",e,Object(i.b)("path",{fill:"#FCFCFC",d:"M0 0h796v333H0z"}),Object(i.b)("rect",{x:"56",y:"68",width:"685",height:"201",rx:"4",fill:"#fff",filter:"url(#a)"}),Object(i.b)("path",{d:"M143.045 215.141c2.206 0 3.876-1.389 3.876-3.578 0-4.016-5.977-3.084-5.977-6.143 0-1.134.958-1.819 1.995-1.819.985 0 1.908.457 2.409 1.432l1.054-.703c-.773-1.318-1.995-1.934-3.454-1.934-1.845 0-3.366 1.24-3.366 3.147 0 3.77 5.977 2.883 5.977 6.117 0 1.512-1.02 2.224-2.505 2.224-1.468 0-2.813-.791-2.989-2.452l-1.309.386c.351 2.224 2.267 3.323 4.289 3.323zm9.001.035c.536 0 .984-.097 1.178-.176v-1.125c-.273.132-.58.22-.879.22-.642 0-1.134-.449-1.134-1.415v-5.353h2.25v-1.107h-2.25v-3.208l-1.309 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.588 2.505 2.144 2.505zm7.068-.071c1.406 0 2.399-.386 3.366-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.696 0-2.566-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.391-.87-4.615-3.744-4.615-2.522 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.947 4.447zm-2.567-5.124c.062-1.485.826-2.707 2.417-2.707 1.688 0 2.496 1.117 2.488 2.707h-4.905zm8.755 8.869h1.319v-5.045c.562.826 1.45 1.371 2.724 1.371 2.294 0 3.534-2.066 3.534-4.571 0-2.504-1.24-4.57-3.534-4.57-1.283 0-2.171.563-2.724 1.38v-1.195h-1.319v12.63zm3.692-4.826c-1.74 0-2.505-1.626-2.505-3.419 0-1.775.765-3.41 2.505-3.41 1.802 0 2.575 1.635 2.575 3.41 0 1.793-.773 3.419-2.575 3.419zm15.374.976h1.389v-12.419h-1.266v.237c0 .879-.545 1.538-1.538 1.538h-1.512v1.143h2.927V215z",fill:"#272A2D"}),Object(i.b)("path",{d:"M299.098 215.141c2.285 0 4.078-1.389 4.078-3.674 0-4.087-5.977-3.226-5.977-5.915 0-.967.835-1.582 1.784-1.582.906 0 1.741.466 2.215 1.38l1.424-.906c-.809-1.406-2.109-2.048-3.603-2.048-1.96 0-3.604 1.24-3.604 3.279 0 3.876 5.977 2.918 5.977 5.897 0 1.24-.879 1.934-2.277 1.934-1.397 0-2.628-.738-2.795-2.303l-1.731.466c.369 2.32 2.399 3.472 4.509 3.472zm9.247.035c.571 0 1.116-.114 1.371-.22v-1.512c-.281.141-.677.273-1.037.273-.607 0-1.108-.361-1.108-1.266v-4.737h2.268v-1.494h-2.268v-3.446l-1.634 1.372v2.074h-1.424v1.494h1.397v4.913c0 1.547.8 2.549 2.435 2.549zm7.252-.071c1.433 0 2.505-.395 3.507-1.423l-1.178-.994c-.659.686-1.345.862-2.347.862-1.502 0-2.285-1.046-2.337-2.382h6.073s.053-.246.053-.483c0-2.33-.897-4.58-3.92-4.58-2.69 0-4.008 2.224-4.008 4.553 0 2.364 1.371 4.447 4.157 4.447zm-2.355-5.229c.114-1.283.799-2.303 2.206-2.303 1.485 0 2.206.906 2.267 2.303h-4.473zm8.509 8.974h1.713v-4.905c.589.8 1.512 1.231 2.628 1.231 2.347 0 3.639-2.101 3.639-4.571 0-2.478-1.292-4.57-3.665-4.57-1.116 0-2.021.448-2.602 1.231v-1.046h-1.713v12.63zm3.884-5.212c-1.608 0-2.329-1.389-2.329-3.033 0-1.634.721-3.049 2.329-3.049 1.653 0 2.373 1.415 2.373 3.049 0 1.644-.72 3.033-2.373 3.033zM336.589 215h8.973v-1.573h-6.231c.65-.413 1.485-.967 2.716-2.189 1.643-1.617 2.9-3.304 2.9-5.22 0-2.119-1.538-3.604-3.814-3.604-2.514 0-4.061 1.855-4.061 4.307l1.749.14c.079-1.564.774-2.847 2.347-2.847 1.248 0 1.96.808 1.96 2.091 0 1.442-.905 2.69-2.18 3.999-1.415 1.416-3.287 2.716-4.359 3.411V215z",fill:"#155DA1"}),Object(i.b)("path",{d:"M455.045 215.141c2.206 0 3.876-1.389 3.876-3.578 0-4.016-5.977-3.084-5.977-6.143 0-1.134.958-1.819 1.995-1.819.985 0 1.908.457 2.409 1.432l1.054-.703c-.773-1.318-1.995-1.934-3.454-1.934-1.845 0-3.366 1.24-3.366 3.147 0 3.77 5.977 2.883 5.977 6.117 0 1.512-1.02 2.224-2.505 2.224-1.468 0-2.813-.791-2.989-2.452l-1.309.386c.351 2.224 2.267 3.323 4.289 3.323zm9.001.035c.536 0 .984-.097 1.178-.176v-1.125c-.273.132-.58.22-.879.22-.642 0-1.134-.449-1.134-1.415v-5.353h2.25v-1.107h-2.25v-3.208l-1.309 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.588 2.505 2.144 2.505zm7.068-.071c1.406 0 2.399-.386 3.366-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.696 0-2.566-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.391-.87-4.615-3.744-4.615-2.522 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.947 4.447zm-2.567-5.124c.062-1.485.826-2.707 2.417-2.707 1.688 0 2.496 1.117 2.488 2.707h-4.905zm8.755 8.869h1.319v-5.045c.562.826 1.45 1.371 2.724 1.371 2.294 0 3.534-2.066 3.534-4.571 0-2.504-1.24-4.57-3.534-4.57-1.283 0-2.171.563-2.724 1.38v-1.195h-1.319v12.63zm3.692-4.826c-1.74 0-2.505-1.626-2.505-3.419 0-1.775.765-3.41 2.505-3.41 1.802 0 2.575 1.635 2.575 3.41 0 1.793-.773 3.419-2.575 3.419zm15.269 1.152c2.311 0 4.183-1.248 4.183-3.709-.044-1.433-.685-2.655-2.127-3.155.958-.581 1.459-1.583 1.459-2.699 0-2.03-1.626-3.217-3.55-3.217-1.978 0-3.56 1.196-3.56 3.261l1.257.141c.017-1.327 1.037-2.162 2.303-2.162 1.204 0 2.258.773 2.258 2.127 0 1.309-.843 2.03-2.056 2.03h-.844v1.23h.844c1.459 0 2.742.774 2.742 2.417 0 1.67-1.442 2.523-2.909 2.523-1.53 0-2.909-.923-2.909-2.593l-1.275.123c0 2.47 1.881 3.683 4.184 3.683zM611.045 215.141c2.206 0 3.876-1.389 3.876-3.578 0-4.016-5.977-3.084-5.977-6.143 0-1.134.958-1.819 1.995-1.819.985 0 1.908.457 2.409 1.432l1.054-.703c-.773-1.318-1.995-1.934-3.454-1.934-1.845 0-3.366 1.24-3.366 3.147 0 3.77 5.977 2.883 5.977 6.117 0 1.512-1.02 2.224-2.505 2.224-1.468 0-2.813-.791-2.989-2.452l-1.309.386c.351 2.224 2.267 3.323 4.289 3.323zm9.001.035c.536 0 .984-.097 1.178-.176v-1.125c-.273.132-.58.22-.879.22-.642 0-1.134-.449-1.134-1.415v-5.353h2.25v-1.107h-2.25v-3.208l-1.309 1.23v1.978h-1.38v1.107h1.38v5.344c0 1.503.588 2.505 2.144 2.505zm7.068-.071c1.406 0 2.399-.386 3.366-1.353l-.897-.721c-.685.721-1.441.914-2.487.914-1.696 0-2.566-1.336-2.549-2.891h6.117s.044-.229.044-.334c0-2.391-.87-4.615-3.744-4.615-2.522 0-3.797 2.198-3.797 4.553 0 2.391 1.292 4.447 3.947 4.447zm-2.567-5.124c.062-1.485.826-2.707 2.417-2.707 1.688 0 2.496 1.117 2.488 2.707h-4.905zm8.755 8.869h1.319v-5.045c.562.826 1.45 1.371 2.724 1.371 2.294 0 3.534-2.066 3.534-4.571 0-2.504-1.24-4.57-3.534-4.57-1.283 0-2.171.563-2.724 1.38v-1.195h-1.319v12.63zm3.692-4.826c-1.74 0-2.505-1.626-2.505-3.419 0-1.775.765-3.41 2.505-3.41 1.802 0 2.575 1.635 2.575 3.41 0 1.793-.773 3.419-2.575 3.419zm16.569.976h1.363v-3.349h1.977v-1.186h-1.977v-7.884h-1.239l-5.854 8.279v.791h5.73V215zm-4.086-4.535l4.086-5.775v5.775h-4.086z",fill:"#272A2D"}),Object(i.b)("path",{d:"M169.5 167.5h463",stroke:"#EBEEF2",strokeWidth:"5",strokeLinecap:"square"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M476 187c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20zM632 187c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z",fill:"#fff",stroke:"#155DA1",strokeWidth:"3"}),Object(i.b)("path",{d:"M168.5 167.5h152",stroke:"#155DA1",strokeWidth:"5",strokeLinecap:"square"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M164 187c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z",fill:"#155DA1"}),Object(i.b)("path",{d:"M178 166.112v1.288a14 14 0 1 1-8.302-12.796",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),Object(i.b)("path",{d:"M178 156.2l-14 14.014-4.2-4.2",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),Object(i.b)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M320 187c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z",fill:"#155DA1",stroke:"#155DA1",strokeWidth:"3"}),Object(i.b)("defs",null,Object(i.b)("filter",{id:"a",x:"52",y:"66",width:"693",height:"209",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB"},Object(i.b)("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Object(i.b)("feColorMatrix",{in:"SourceAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),Object(i.b)("feOffset",{dy:"2"}),Object(i.b)("feGaussianBlur",{stdDeviation:"2"}),Object(i.b)("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.153109 0"}),Object(i.b)("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Object(i.b)("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"}))))};x.defaultProps={width:"796",height:"333",viewBox:"0 0 796 333",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var u={type:"design",title:"Forms"},O={meta:u},j=Object(d.a)(function(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?m(Object(l),!0).forEach((function(t){Object(r.a)(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):m(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}({},u));function v(e){var t,l=e.components,n=Object(o.a)(e,["components"]);return Object(i.b)(j,Object(c.a)({},O,n,{components:l,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Bridge supports multiple form components. This page describes general form usage and structure. Specific form design patterns:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(c.a)({parentName:"li"},{href:"/design/text-fields"}),"Text Fields")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(c.a)({parentName:"li"},{href:"/design/form-selections"}),"Form Selections")," - includes radio, checkboxes, and dropdowns"),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(c.a)({parentName:"li"},{href:"/design/file-upload"}),"File Upload")," ")),Object(i.b)("h4",null,"Basic Structure for all forms"),Object(i.b)(h.a,{mdxType:"Row"},Object(i.b)(p.a,{mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Prompts")),Object(i.b)("p",null,"Prompts should follow the Tables/Alerts/Forms text style and be\n12 px from the form field."),Object(i.b)("p",null,"They should be:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Written in sentence case"),Object(i.b)("li",{parentName:"ul"},"1 to 4 words in length")))),Object(i.b)(p.a,{mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Section Titles")),Object(i.b)("p",null,"Similar groups of information should be separated into sections."),Object(i.b)("p",null,"They should be:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Written in sentence case"),Object(i.b)("li",{parentName:"ul"},"1 to 4 words in length"))))),Object(i.b)("h4",null,"Form Components"),Object(i.b)(h.a,{mdxType:"Row"},Object(i.b)(p.a,{mt:"12px",mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)(b.Link,{fontWeight:"500",href:"/design/text-field",mdxType:"Link"},"Text Field"),Object(i.b)(s.a,{p:"32px",width:"280px",height:"160px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text field label"),Object(i.b)(b.TextField,{error:"default",mb:"xs",placeholder:"placeholder text",mdxType:"TextField"})))),Object(i.b)(p.a,{mt:"12px",mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)(b.Link,{fontWeight:"500",href:"/design/text-field",mdxType:"Link"},"Text Area"),Object(i.b)(s.a,{p:"32px",width:"280px",height:"160px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text area label"),Object(i.b)(b.TextField,{error:"default",mb:"xs",as:"textarea",placeholder:"placeholder text",lines:4,mdxType:"TextField"})))),Object(i.b)(p.a,{mt:"32px",mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)(b.Link,{fontWeight:"500",href:"/design/form-selections",mdxType:"Link"},"Radio"),Object(i.b)(s.a,{p:"32px",width:"280px",height:"240px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{type:"forms",ml:"24px",mb:"28px",as:"p",mdxType:"Text"},"Favorite Color"),Object(i.b)(b.Radio.Group,{vertical:!0,ml:"24px",name:"colors"},Object(i.b)(b.Radio,{id:"blue",value:"blue",mdxType:"Radio"},"Blue"),Object(i.b)(b.Radio,{defaultChecked:!0,id:"red",value:"red",mdxType:"Radio"},"Red"),Object(i.b)(b.Radio,{id:"purple",value:"purple",mdxType:"Radio"},"Purple"),Object(i.b)(b.Radio,{id:"green",value:"green",mdxType:"Radio"},"Green"))))),Object(i.b)(p.a,{mt:"32px",mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)(b.Link,{fontWeight:"500",href:"/design/form-selections",mdxType:"Link"},"Checkbox"),Object(i.b)(s.a,{p:"32px",width:"280px",height:"240px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{type:"forms",ml:"24px",mb:"28px",as:"p",mdxType:"Text"},"Pick colors"),Object(i.b)(b.Checkbox.Group,{vertical:!0,ml:"24px",name:"colors"},Object(i.b)(b.Checkbox,{id:"blue-c",value:"blue",mdxType:"Checkbox"},"Blue"),Object(i.b)(b.Checkbox,{id:"red-c",value:"red",mdxType:"Checkbox"},"Red"),Object(i.b)(b.Checkbox,{defaultChecked:!0,id:"purple-c",value:"purple",mdxType:"Checkbox"},"Purple"),Object(i.b)(b.Checkbox,{id:"green-c",value:"green",mdxType:"Checkbox"},"Green"))))),Object(i.b)(p.a,{mt:"32px",mdxType:"Col"},Object(i.b)(b.Box,{mdxType:"Box"},Object(i.b)(b.Link,{fontWeight:"500",href:"/design/form-selections",mdxType:"Link"},"Dropdown"),Object(i.b)(s.a,{p:"32px",width:"280px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Dropdown Label"),Object(i.b)(b.Dropdown,{mdxType:"Dropdown"},Object(i.b)(b.Dropdown.Summary,null,"Dropdown"),Object(i.b)(b.Dropdown.Menu,null,Object(i.b)(b.Dropdown.Item,null,"Item 1"),Object(i.b)(b.Dropdown.Item,null,"Item 2"),Object(i.b)(b.Dropdown.Item,null,"Item 3"))))))),Object(i.b)("br",null),Object(i.b)("h4",null,"Required/Optional Fields"),Object(i.b)("p",null,"Required and Optional fields should be denoted by italicized letters in primary blue body text following the input prompt. "),Object(i.b)("p",null,"This applies to all form components. Below are examples of it on TextFields and TextAreas."),Object(i.b)(h.a,{mdxType:"Row"},Object(i.b)(p.a,{mdxType:"Col"},Object(i.b)(s.a,{p:"32px",width:"280px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text area label",Object(i.b)(b.Text,{types:"forms",color:"blue.3",fontStyle:"italic",ml:"12px",mdxType:"Text"},"Required")),Object(i.b)(b.TextField,{error:"default",mb:"xs",as:"textarea",placeholder:"placeholder text",lines:4,mdxType:"TextField"}))),Object(i.b)(p.a,{mdxType:"Col"},Object(i.b)(s.a,{p:"32px",width:"280px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text area label",Object(i.b)(b.Text,{types:"forms",color:"blue.3",fontStyle:"italic",ml:"12px",mdxType:"Text"},"Optional")),Object(i.b)(b.TextField,{error:"default",mb:"xs",as:"textarea",placeholder:"placeholder text",lines:4,mdxType:"TextField"})))),Object(i.b)("br",null),Object(i.b)("h4",null,"Helper Text"),Object(i.b)("p",null,"Required and Optional fields should be denoted by italicized letters in primary blue body text 8px from the bottom of the input prompt. "),Object(i.b)("p",null,"This applies to all form components. Below is an example of helper text on a TextField."),Object(i.b)(s.a,{p:"32px",width:"280px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text area label"),Object(i.b)(b.TextField,{error:"default",mb:"xs",as:"textarea",placeholder:"placeholder text",lines:4,mdxType:"TextField"}),Object(i.b)(b.Text,{types:"forms",color:"blue.3",fontStyle:"italic",mdxType:"Text"},"8 or more characters")),Object(i.b)("br",null),Object(i.b)("h4",null,"Errors"),Object(i.b)("p",null,"Error messages should:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Be colored in primary red"),Object(i.b)("li",{parentName:"ul"},"Written in sentence case"),Object(i.b)("li",{parentName:"ul"},"Visible immediately after the user has filled in an invalid input,\nNOT during"),Object(i.b)("li",{parentName:"ul"},"Be removed immediately once the user enters a valid input")),Object(i.b)("p",null,"Prompts and Fields with errors should:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Be colored in primary red"),Object(i.b)("li",{parentName:"ul"},"Have borders in 1 px primary red")),Object(i.b)("br",null),Object(i.b)("p",null,"Here's an example of a text field component:"),Object(i.b)(s.a,{p:"32px",width:"280px",mdxType:"CodeExampleBox"},Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",mdxType:"Text"},"Text field label"),Object(i.b)(b.TextField,(t={error:"default",mb:"xs",placeholder:"placeholder text"},Object(r.a)(t,"error","error"),Object(r.a)(t,"mdxType","TextField"),t)),Object(i.b)(b.Text,{mt:"0",as:"p",type:"forms",color:"redPalette.primary",mdxType:"Text"},"Text field label")),Object(i.b)("br",null),Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Please look at documentation on each form component for examples and guides on their error state.")),Object(i.b)("h4",null,"Multi-step forms"),Object(i.b)("p",null,"Forms with steps should be broken up into individual pages so that the user isn\u2019t overwhelmed by a seemingly\nendless scroll of content. Names of steps should be clearly labeled on each page."),Object(i.b)("br",null),Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Progress Bars")),Object(i.b)("p",null,"Steps should be broken up into individual pages. Include status bars at the top so that the user knows where\nthey are in the process of completing the form at all times. Each step should be clickable."),Object(i.b)(x,{mdxType:"MultiStepForm"}),Object(i.b)("p",null,Object(i.b)("strong",{parentName:"p"},"Navigation Buttons")),Object(i.b)("p",null,"Buttons to advance the user or bring the user back a step in the process of completing the form should be\nin the bottom right of the form."),Object(i.b)(f,{mdxType:"FormNav"}),Object(i.b)("h4",null,"Usage"),Object(i.b)(b.Flex,{flexWrap:"wrap",flexDirection:"row",mdxType:"Flex"},Object(i.b)(b.Box,{flexGrow:1,flexBasis:"40%",minWidth:"240px",m:["20px 0","0 10px"],mdxType:"Box"},Object(i.b)("img",{src:"/docs-content/design/forms/forms-do.svg",width:"100%"})),Object(i.b)(b.Box,{flexGrow:1,minWidth:"240px",flexBasis:"40%",m:["20px 0","0 10px"],mdxType:"Box"},Object(i.b)("img",{src:"/docs-content/design/forms/forms-dont.svg",width:"100%"}))))}v.isMDXComponent=!0}},[["Ziot",0,2,5,1,3,4]]]);