https://layer5.io/component---src-templates-sistent-component-js-c…ormcontrol-code-mdx-d4f19939c3b3ccf42c4e.js

1(self.webpackChunkLayer5=self.webpackChunkLayer5||[]).push([[9454],{25452:function(e,t,n){"use strict";var l=n(96540),a=n(48995),i=n(92121);t.A=e=>{let{children:t}=e;const{isDark:n}=(0,i.G)();return l.createElement(a.SistentThemeProvider,{initialMode:n?"dark":"light"},t)}},36669:function(e,t,n){var l=n(75972).k5;e.exports.Z=function(e){return l({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"}}]})(e)}},38141:function(e,t,n){"use strict";n.d(t,{A:function(){return o}});var l=n(96540),a=n(86462),i=n(64810);const r=e=>{let{canonical:t,description:n,image:r,schemaMarkup:o,title:m,children:c}=e;const{pathname:d}=(0,a.useLocation)(),s="true"==={}.GATSBY_PREVIEW,{title:u,description:p,image:E,siteUrl:f,twitterUsername:h}=(0,i.useStaticQuery)("4047814605").site.siteMetadata,g={title:m||u,description:n||p,image:(b=r||E,b?/^(?:[a-z]+:)?\/\//i.test(b)?b:new 

1URL(b.replace(/^\//,""),f+"/").toString():b),url:new URL((d.replace(".html","")||"/").replace(/^\//,""),f+"/").toString().replace(/\/$/,""),twitterUsername:h};var b;return t&&!s||(t=g.url),l.createElement(l.Fragment,null,l.createElement("title",null,g.title),l.createElement("meta",{charSet:"utf-8"}),l.createElement("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}),l.createElement("meta",{name:"description",content:g.description}),l.createElement("meta",{name:"image",content:g.image}),l.createElement("meta",{name:"author",content:"Layer5, Inc."}),s&&l.createElement(l.Fragment,null,l.createElement("meta",{name:"robots",content:"noindex, nofollow"}),l.createElement("meta",{name:"googlebot",content:"noindex, nofollow"})),l.createElement("meta",{property:"og:type",content:"website"}),l.createElement("meta",{property:"og:title",content:g.title}),l.createElement("meta",{property:"og:description",content:g.description}),l.createElement("meta",{property:"og:image",content:g.image}),l.createElement("meta",{property:"og:url",content:g.url}),l.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),l.createElement("meta",{name:"twitter:creator",content:g.twitterUsername}),l.createElement("meta",{name:"twitter:title",content:g.title}),l.createElement("meta",{name:"twitter:description",content:g.description}),l.createElement("meta",{name:"twitter:image",content:g.image}),l.createElement("meta",{name:"twitter:url",content:g.url}),l.createElement("link",{rel:"shortcut icon",type:"image/x-icon",href:"data:image/webp;base64,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"}),l.createElement("link",{rel:"canonical",href:t}),o&&l.createElement("script",{type:"application/ld+json"},JSON.stringify(o)),c)};r.defaultProps={title:null,lang:"en",meta:[],description:"",image:null};var o=r},61262:function(e,t,n){"use strict";n.d(t,{p:function(){return c}});var l=n(96540),a=n(91580),i=n(66198),r=n(66054),o=n(78023),m=n(95646);const c=e=>{let{title:t,children:n}=e;return l.createElement(a.A,null,l.createElement("div",{className:"page-header-section"},l.createElement("h1",null,t)),l.createElement("div",{className:"page-container"},l.createElement(i.A,null),l.createElement("div",{className:"page-section"}

1,l.createElement(r.mc,null,n," ",l.createElement(o.A,null)),l.createElement(m.A,null))))}},78023:function(e,t,n){"use strict";n.d(t,{A:function(){return c}});n(20410);var l=n(96540),a=n(64810),i=n(96044);var r=n(882).default.div.withConfig({displayName:"paginationstyle__TocPaginationWrapper",componentId:"sc-isbsjw-0"})(["display:flex;gap:1rem;justify-content:center;margin:3rem 2rem 4rem 2rem;@media screen and (max-width:540px){margin:0 0 2rem 0;flex-flow:row wrap;gap:0.3rem;}"]);const o=[{link:"/projects/sistent/getting-started/about",text:"About"},{link:"/projects/sistent/getting-started/installation",text:"Installation"},{link:"/projects/sistent/getting-started/usage",text:"Usage"},{link:"/projects/sistent/getting-started/tokens",text:"Tokens"},{link:"/projects/sistent/identity/color",text:"Colors"},{link:"/projects/sistent/identity/color/guidance",text:"Colors"},{link:"/projects/sistent/identity/color/code",text:"Colors"},{link:"/projects/sistent/identity/spacing",text:"Spacing"},{link:"/projects/sistent/identity/spacing/guidance",text:"Spacing"},{link:"/projects/sistent/identity/spacing/code",text:"Spacing"},{link:"/projects/sistent/identity/typography",text:"Typography"},{link:"/projects/sistent/identity/typography/guidance",text:"Typography"},{link:"/projects/sistent/identity/typography/code",text:"Typography"}],m={overview:1,guidance:2,code:3};var c=()=>{var e,t;const{0:n,1:c}=(0,l.useState)(0),d=(0,a.useStaticQuery)("805582494"),s=(0,l.useMemo)(()=>{const e=new Set;return d.allMdx.nodes.forEach(t=>{"overview"===t.fields.pageType&&!0===t.frontmatter.published&&e.add(t.frontmatter.component)}),e},[d.allMdx.nodes]),u=(0,l.useMemo)(()=>d.allMdx.nodes.map(e=>({componentSlug:e.frontmatter.component,text:e.frontmatter.name||e.frontmatter.component,link:e.fields.slug,pageType:e.fields.pageType})).filter(e=>s.has(e.componentSlug)).sort((e,t)=>e.componentSlug!==t.componentSlug?(e.componentSlug||"").localeCompare(t.componentSlug||""):(m[e.pageType]||99)-(m[t.pageType]||99)),[d.allMdx.nodes,s]),p=(0,l.useMemo)(()=>{const e=[...o,...u],t=new Set;return e.filter(e=>!t.has(e.link)&&(t.add(e.link),!0))},[u]);return(0,l.useEffect)(()=>{const e=window.location.pathname,t=e.endsWith("/")&&e.length>1?e.slice(0,-1):e,n=p.findIndex(e=>e.link===t);c(n)},[p]),l.createElement(r,null,n>0?l.createElement(i.default,{$secondary:!0,$url:null===(e=p[n-1])||void 0===e?void 0:e.link},"← Previous"):null,-1!==n&&n<p.length-1?l.createElement(i.default,{$primary:!0,$url:null===(t=p[n+1])||void 0===t?void 0:t.link},"Next →"):null)}},95646:function(e,t,n){"use strict";var l=n(96540),a=n(64810);const i=n(882).default.div.withConfig({displayName:"intra-page__JoinCommunityWrapper",componentId:"sc-q3x19t-0"})(["width:18rem;@media screen and (max-width:750px){display:none;}@media screen and (min-width:751px) and (max-width:1279px){display:none;}.intra-page{position:sticky;top:17rem;right:0rem;margin-right:1rem;margin-top:17rem;padding-bottom:5rem;padding-right:2rem;align-items:left;justify-content:space-around;display:flex;flex-direction:column;overflow:hidden;.list{color:#000000;}.active{font-weight:5000;color:#000000;}ul{list-style:none;top:3rem;li{padding-bottom:0.5rem;padding-top:0.5rem;}}@media only screen and (min-width:1280px) and (max-width:1350px){padding-right:0rem;margin-right:0rem;}@media only screen and (max-width:950px){width:0;opacity:0;height:0;transition:none;visibility:hidden;}}.learn{width:10rem;}"]);t.A=function(){const{0:e,1:t}=(0,l.useState)([]);(0,l.useEffect)(()=>{const e=document.querySelectorAll(".main-content > a");console.log(e),e&&t(Array.from(e).map(e=>({id:e.id,link:"#"+e.id,text:e.id})))},[]);const{0:n,1:r}=(0,l.useState)(null);return(0,l.useEffect)(()=>{const e=window.location.pathname;r(e)},[]),l.createElement(i,null,l.createElement("div",{className:"intra-page"},l.createElement("ul",null,e.map(e=>l.createElement("li",{key:e.id,className:"list"},l.createElement(a.Link,{to:""+n+e.link,key:e.id,activeClassName:"active"},e.text))))))}},96473:function(e,t,n){"use strict";n.r(t),n.d(t,{Head:function(){return k},default:function(){return N}});var l=n(28453),a=n(96540),i=n(48995);const r=()=>a.createElement(i.FormControl,{sx:{width:"200px"}},a.createElement(i.InputLabel,{id:"demo-form-control-label"},"Name"),a.createElement(i.Select,{labelId:"demo-form-control-label",id:"demo-form-control",label:"Name",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"john"},"John"),a.createElement(i.MenuItem,{value:"jane"},"Jane"),a.createElement(i.MenuItem,{value:"bob"},"Bob"))),o=()=>a.createElement(i.FormControl,{fullWidth:!0},a.createElement(i.TextField,{label:"Full Width Input",variant:"outlined",placeholder:"This input takes full width"})),m=()=>a.createElement(i.FormControl,{sx:{width:"200px"},required:!0},a.createElement(i.InputLabel,{id:"demo-required-label"},"Required Field"),a.createElement(i.Select,{labelId:"demo-required-label",id:"demo-required",label:"Required Field",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"option1"},"Option 1"),a.createElement(i.MenuItem,{value:"option2"},"Option 2"))),c=()=>a.createElement(i.FormControl,{sx:{width:"200px"},error:!0},a.createElement(i.InputLabel,{id:"demo-error-label"},"Email"),a.createElement(i.Select,{labelId:"demo-error-label",id:"demo-error",label:"Email",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"email1"},"[email protected]"),a.createElement(i.MenuItem,{value:"email2"},"[email protected]"))),d=()=>a.createElement(i.FormControl,{sx:{width:"200px"},disabled:!0},a.createElement(i.InputLabel,{id:"demo-disabled-label"},"Disabled Field"),a.createElement(i.Select,{labelId:"demo-disabled-label",id:"demo-disabled",label:"Disabled Field",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"option1"},"Option 1"),a.createElement(i.MenuItem,{value:"option2"},"Option 2"))),s=()=>a.createElement(i.Box,{sx:{display:"flex",flexDirection:"column",gap:2}},a.createElement(i.FormControl,{sx:{width:"200px"},size:"small"},a.createElement(i.InputLabel,{id:"demo-small-label"},"Small Size"),a.createElement(i.Select,{labelId:"demo-small-label",id:"demo-small",label:"Small Size",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"small"},"Small Option"))),a.createElement(i.FormControl,{sx:{width:"200px"},size:"medium"},a.createElement(i.InputLabel,{id:"demo-medium-label"},"Medium Size"),a.createElement(i.Select,{labelId:"demo-medium-label",id:"demo-medium",label:"Medium Size",MenuProps:{disableScrollLock:!0,marginThreshold:null}},a.createElement(i.MenuItem,{value:"medium"},"Medium Option"))));function u(e){const{ThemeWrapper:t,CodeBlock:n}=Object.assign({},(0,l.R)(),e.components);return n||E("CodeBlock",!0),t||E("ThemeWrapper",!0),a.createElement(a.Fragment,null,a.createElement("a",{id:"Basic Usage"},a.createElement("h2",null,"Basic Usage")),"\n",a.createElement("p",null,"The most common use case for FormControl is wrapping form inputs with labels."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(r))),a.createElement(n,{name:"basic-form-control",collapsible:!0,code:'

1<FormControl sx={{ width: "200px" }}>\n  <InputLabel id="demo-form-control-label">Name</InputLabel>\n  <Select\n    labelId="demo-form-control-label"\n    id="demo-form-control"\n    label="Name"\n  >\n    <MenuItem value="john">John</MenuItem>\n    <MenuItem value="jane">Jane</MenuItem>\n    <MenuItem value="bob">Bob</MenuItem>\n  </Select>\n</FormControl>'})),"\n",a.createElement("a",{id:"Full Width"},a.createElement("h2",null,"Full Width")),"\n",a.createElement("p",null,"Use the ",a.createElement("code",null,"fullWidth")," prop to make the FormControl take the full width of its container."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(o))),a.createElement(n,{name:"full-width-form-control",collapsible:!0,code:'<FormControl fullWidth>\n  <TextField\n    label="Full Width Input"\n    variant="outlined"\n    placeholder="This input takes full width"\n  />\n</FormControl>'})),"\n",a.createElement("a",{id:"Required Fields"},a.createElement("h2",null,"Required Fields")),"\n",a.createElement("p",null,"Add the ",a.createElement("code",null,"required")," prop to indicate that a field must be filled."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(m))),a.createElement(n,{name:"required-form-control",collapsible:!0,code:'<FormControl sx={{ width: "200px" }} required>\n  <InputLabel id="demo-required-label">Required Field</InputLabel>\n  <Select\n    labelId="demo-required-label"\n    id="demo-required"\n    label="Required Field"\n  >\n    <MenuItem value="option1">Option 1</MenuItem>\n    <MenuItem value="option2">Option 2</MenuItem>\n  </Select>\n</FormControl>'})),"\n",a.createElement("a",{id:"Error State"},a.createElement("h2",null,"Error State")),"\n",a.createElement("p",null,"Use the ",a.createElement("code",null,"error")," prop to indicate validation errors."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(c))),a.createElement(n,{name:"error-form-control",collapsible:!0,code:'<FormControl sx={{ width: "200px" }} error>\n  <InputLabel id="demo-error-label">Email</InputLabel>\n  <Select\n    labelId="demo-error-label"\n    id="demo-error"\n    label="Email"\n  >\n    <MenuItem value="email1">[email protected]</MenuItem>\n    <MenuItem value="email2">[email protected]</MenuItem>\n  </Select>\n</FormControl>'})),"\n",a.createElement("a",{id:"Disabled State"},a.createElement("h2",null,"Disabled State")),"\n",a.createElement("p",null,"The ",a.createElement("code",null,"disabled")," prop prevents user interaction with the form control."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(d))),a.createElement(n,{name:"disabled-form-control",collapsible:!0,code:'<FormControl sx={{ width: "200px" }} disabled>\n  <InputLabel id="demo-disabled-label">Disabled Field</InputLabel>\n  <Select\n    labelId="demo-disabled-label"\n    id="demo-disabled"\n    label="Disabled Field"\n  >\n    <MenuItem value="option1">Option 1</MenuItem>\n    <MenuItem value="option2">Option 2</MenuItem>\n  </Select>\n</FormControl>'})),"\n",a.createElement("a",{id:"Size Variants"},a.createElement("h2",null,"Size Variants")),"\n",a.createElement("p",null,"FormControl supports ",a.createElement("code",null,"small")," and ",a.createElement("code",null,"medium")," sizes."),"\n",a.createElement("div",{className:"showcase"},a.createElement("div",{className:"items"},a.createElement(t,null,a.createElement(s))),a.createElement(n,{name:"size-form-control",collapsible:!0,code:'<FormControl sx={{ width: "200px" }} size="small">\n  <InputLabel id="demo-small-label">Small Size</InputLabel>\n  <Select\n    labelId="demo-small-label"\n    id="demo-small"\n    label="Small Size"\n  >\n    <MenuItem value="small">Small Option</MenuItem>\n  </Select>\n</FormControl>\n\n<FormControl sx={{ width: "200px" }} size="medium">\n  <InputLabel id="demo-medium-label">Medium Size</InputLabel>\n  <Select\n    labelId="demo-medium-label"\n    id="demo-medium"\n    label="Medium Size"\n  >\n    <MenuItem value="medium">Medium Option</MenuItem>\n  </Select>\n</FormControl>'})))}var p=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,l.R)(),e.components);return t?a.createElement(t,e,a.createElement(u,e)):u(e)};function E(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var f=n(64810),h=n(86462),g=n(36669),b=n(61262),x=n(96044),w=n(66054),A=n(79147),I=n(25452),y=n(38141);const v=e=>e.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" "),T={SistentThemeProvider:i.SistentThemeProvider,ThemeWrapper:I.A,Button:i.Button,Col:w.fv,Row:w.fI,CodeBlock:A.Ay,FaArrowRight:g.Z},S=e=>{let{data:t,children:n,pageContext:i}=e;const{frontmatter:r}=t.mdx,o=(0,h.useLocation)(),{componentName:m,availablePages:c}

1=i,d="/projects/sistent/components/"+m,s=v(m);return a.createElement(b.p,{title:s},a.createElement("div",{className:"content"},a.createElement("div",{style:{marginBottom:"1rem"}},a.createElement("h1",null,s),r.description&&a.createElement("p",null,r.description)),a.createElement(l.x,{components:T},a.createElement("div",{className:"filterBtns"},c.includes("overview")&&a.createElement(x.default,{className:o.pathname===d?"active":"",onClick:()=>(0,f.navigate)(d),title:"Overview"}),c.includes("guidance")&&a.createElement(x.default,{className:o.pathname===d+"/guidance"?"active":"",onClick:()=>(0,f.navigate)(d+"/guidance"),title:"Guidance"}),c.includes("code")&&a.createElement(x.default,{className:o.pathname===d+"/code"?"active":"",onClick:()=>(0,f.navigate)(d+"/code"),title:"Code"})),a.createElement("div",{className:"main-content"},n))))},k=e=>{let{data:t,pageContext:n}=e;const{frontmatter:l}=t.mdx,{componentName:i}=n,r=v(i);return a.createElement(y.A,{title:l.title||r+" - Sistent Design System",description:l.description||r+" component guidance, usage, and code reference from Sistent, Layer5's open source design system for cloud native applications."})};function N(e){return a.createElement(S,e,a.createElement(p,e))}}}]);