{"version":3,"sources":["webpack:///./src/components/banner/index.js","webpack:///./src/@nib/gatsby-theme-mesh-docs/templates/Content.js","webpack:///./content/components/textbox.mdx"],"names":["Banner","React","createElement","Inline","space","Link","component","GatsbyLink","to","GridLayout","styled","div","withConfig","displayName","componentId","breakpoint","BREAKPOINTS","DRAWER","Content","props","Theme","theme","nib","Layout","bannerContent","SkipLink","link","text","Header","Sidebar","location","Target","id","Main","pageContext","children","Footer","propTypes","PropTypes","node","object","_frontmatter","Example","name","console","warn","mdx","layoutProps","MDXLayout","DefaultLayout","MDXContent","_ref","components","_objectWithoutProperties","_excluded","Object","assign","mdxType","parentName","FormControl","label","formMode","Textbox","valid","validated","value","readOnly","error","isMDXComponent"],"mappings":"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","file":"component---content-components-textbox-mdx-e0034610d6e878404e12.js","sourcesContent":["import React from 'react';\nimport {Inline} from '@nib/layout';\nimport Link from '@nib-components/link';\nimport {Link as GatsbyLink} from 'gatsby';\n\nconst Banner = () => (\n  <Inline space={2}>\n    <span>Design Tokens for Mesh have just been released!</span>{' '}\n    <Link component={GatsbyLink} to=\"/design-tokens/overview/\">\n      Check out the design tokens now\n    </Link>\n  </Inline>\n);\n\nexport default Banner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {breakpoint} from '@nib/layout';\nimport {SkipLink, Target} from '@nib-components/skip-link';\nimport {Footer, Layout, Main, Sidebar} from '@nib/gatsby-theme-mesh-docs';\nimport Theme, {nib} from '@nib-components/theme';\n\nimport Header from '../../../components/header/Header';\nimport {BREAKPOINTS} from '../../../constants';\nimport Banner from '../../../components/banner';\n\nconst GridLayout = styled.div`\n  min-height: 100vh;\n  display: grid;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer';\n  grid-template-rows: 3.5rem 1fr auto;\n  grid-template-columns: 1fr;\n\n  ${breakpoint(BREAKPOINTS.DRAWER)`\n    grid-template-areas:\n      \"header header\"\n      \"sidebar main\"\n      \"sidebar footer\";\n    grid-template-columns: 15rem 1fr;\n  `};\n`;\n\nconst Content = props => {\n  return (\n    <Theme theme={nib}>\n      <Layout bannerContent={<Banner />}>\n        <SkipLink link=\"#content\" text=\"Skip to content\" />\n        <GridLayout>\n          <Header />\n          <Sidebar location={props.location} />\n          <Target id=\"content\" component={Main} pageContext={props.pageContext} location={props.location}>\n            {props.children}\n          </Target>\n          <Footer />\n        </GridLayout>\n      </Layout>\n    </Theme>\n  );\n};\n\nContent.displayName = 'Content';\nContent.propTypes = {\n  children: PropTypes.node,\n  location: PropTypes.object,\n  pageContext: PropTypes.object\n};\n\nexport default Content;\n","import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport DefaultLayout from \"/tmp/node_modules/@nib/gatsby-theme-mesh-docs/src/templates/Content.js\";\nimport FormControl from '@nib-components/form-control';\nimport Textbox from '@nib-components/textbox';\nexport const _frontmatter = {};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return <div {...props} />;\n};\nconst Example = makeShortcode(\"Example\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h2 {...{\n      \"id\": \"installation\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#installation\",\n        \"aria-label\": \"installation permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Installation`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-bash\"\n      }}>{`npm install @nib-components/textbox\n`}</code></pre>\n    <blockquote>\n      <p parentName=\"blockquote\">{`As a form input, `}<a parentName=\"p\" {...{\n          \"href\": \"/components/form-control/\"\n        }}>{`@nib-components/form-control`}</a>{` must wrap this component to provide an accessible label, help text, and validation styling.`}</p>\n    </blockquote>\n    <h2 {...{\n      \"id\": \"usage\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#usage\",\n        \"aria-label\": \"usage permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Usage`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import Textbox from '@nib-components/textbox';\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"interactive-demo\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#interactive-demo\",\n        \"aria-label\": \"interactive demo permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Interactive demo`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\",\n        \"metastring\": \"live\",\n        \"live\": true\n      }}>{`<FormControl id=\"first-name\" name=\"firstName\" label=\"What's your name?\" help=\"As it appears on your passport\" valid={false} validated={false} error=\"Please enter your first name.\">\n  <Textbox />\n</FormControl>\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"props\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#props\",\n        \"aria-label\": \"props permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Props`}</h2>\n    <p>{`As the `}<inlineCode parentName=\"p\">{`<Textbox/>`}</inlineCode>{` is wrapped in a `}<inlineCode parentName=\"p\">{`<FormControl/>`}</inlineCode>{`, all FormControl props such as `}<inlineCode parentName=\"p\">{`valid`}</inlineCode>{`, `}<inlineCode parentName=\"p\">{`validated`}</inlineCode>{`, and `}<inlineCode parentName=\"p\">{`disabled`}</inlineCode>{` will be passed down to this component. This includes the `}<inlineCode parentName=\"p\">{`id`}</inlineCode>{`, `}<inlineCode parentName=\"p\">{`name`}</inlineCode>{` and `}<inlineCode parentName=\"p\">{`label`}</inlineCode>{` which will align with the `}<inlineCode parentName=\"p\">{`for`}</inlineCode>{` attribute on the `}<inlineCode parentName=\"p\">{`<label>`}</inlineCode>{`.`}</p>\n    <p>{`All props passed directly to `}<inlineCode parentName=\"p\">{`<Textbox/>`}</inlineCode>{` will be applied to the underlying `}<inlineCode parentName=\"p\">{`<input>`}</inlineCode>{` as attributes.`}</p>\n    <h2 {...{\n      \"id\": \"labels\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#labels\",\n        \"aria-label\": \"labels permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Labels`}</h2>\n    <p>{`Labels help the user understand what information to enter into the textbox field. Labels are short, concise and use sentence-style capitalisation.`}</p>\n    <h3 {...{\n      \"id\": \"optional-inputs\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#optional-inputs\",\n        \"aria-label\": \"optional inputs permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Optional inputs`}</h3>\n    <p>{`Denote optional fields by adding `}<inlineCode parentName=\"p\">{`“(Optional)\"`}</inlineCode>{` to the end of the textbox label.`}</p>\n    <Example mdxType=\"Example\">\n  <FormControl label=\"Label (Optional)\" id=\"optional\" name=\"optional\" formMode=\"light\" mdxType=\"FormControl\">\n    <Textbox mdxType=\"Textbox\" />\n  </FormControl>\n    </Example>\n    <h3 {...{\n      \"id\": \"accessibility-best-practices-for-labels\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#accessibility-best-practices-for-labels\",\n        \"aria-label\": \"accessibility best practices for labels permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Accessibility best practices for labels`}</h3>\n    <ul>\n      <li parentName=\"ul\">{`Labels must be visible when a textbox is in focus.`}</li>\n      <li parentName=\"ul\">{`Labels must be announced to the screen reader on focus.`}</li>\n    </ul>\n    <h2 {...{\n      \"id\": \"placeholder-text\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#placeholder-text\",\n        \"aria-label\": \"placeholder text permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Placeholder text`}</h2>\n    <p>{`Avoid using placeholder text in textboxes. Placeholder text is not accessible due to low colour contrast and the disappearing placeholder text requires the user to rely on their short-term memory to complete the field correctly. Placeholder text can also be mistaken as a default value causing the user to skip the field completely.`}</p>\n    <p>{`Help text should be used in place of placeholder text to communicate supporting instructions.`}</p>\n    <h2 {...{\n      \"id\": \"help-text\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#help-text\",\n        \"aria-label\": \"help text permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Help text`}</h2>\n    <p>{`Help text is an instruction that supports a user to fill out a textbox field. It can also be used to clarify how the information will be used. It is optional and should only be used where needed.`}</p>\n    <p>{`Help text should appear below the label and above the textbox field. Use sentence-style capitalisation and concise sentence/s.`}</p>\n    <h3 {...{\n      \"id\": \"accessibility-best-practices-for-help-text\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#accessibility-best-practices-for-help-text\",\n        \"aria-label\": \"accessibility best practices for help text permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Accessibility best practices for help text`}</h3>\n    <ul>\n      <li parentName=\"ul\">{`Help text displayed above the textbox field allows screen readers to read the help information before the user completes a field.`}</li>\n    </ul>\n    <h2 {...{\n      \"id\": \"text-input-length\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#text-input-length\",\n        \"aria-label\": \"text input length permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Text input length`}</h2>\n    <p>{`On desktop and tablet screens the length of the textbox should reflect the expected amount of information to be provided. This visual cue gives the user a hint as to how much text to enter.`}</p>\n    <p>{`On mobile the textbox should be full width. This supports users to easily tap the textbox from either side of the mobile device.`}</p>\n    <h2 {...{\n      \"id\": \"autocomplete\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#autocomplete\",\n        \"aria-label\": \"autocomplete permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Autocomplete`}</h2>\n    <p>{`The autocomplete attribute allows the textbox to autofill information on the user’s behalf if they've entered it previously. The value of this attribute is specific to the use-case of the textbox. In React, we must use the `}<em parentName=\"p\">{`camelCase`}</em>{` variant `}<inlineCode parentName=\"p\">{`autoComplete`}</inlineCode>{`.`}</p>\n    <p>{`For example, the `}<inlineCode parentName=\"p\">{`autoComplete`}</inlineCode>{` value for an email address textbox is `}<inlineCode parentName=\"p\">{`“email”`}</inlineCode>{`:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`<FormControl id=\"email\" name=\"email\" help=\"Please enter your email address.\" label=\"What's your email?\">\n  <Textbox autoComplete=\"email\" />\n</FormControl>\n`}</code></pre>\n    <p>{`For a list of valid autocomplete values, refer to this `}<a parentName=\"p\" {...{\n        \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\"\n      }}>{`HTML autocomplete attribute resource`}</a>{`.`}</p>\n    <h2 {...{\n      \"id\": \"validation-and-errors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#validation-and-errors\",\n        \"aria-label\": \"validation and errors permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Validation and errors`}</h2>\n    <p>{`Textbox validation should happen in real-time so the user can fix input errors when they occur. The success state should appear when the input is valid and the error state should appear when the input is invalid.`}</p>\n    <p>{`The success state is denoted with a green border on the bottom of the textbox field and a green success icon.`}</p>\n    <Example mdxType=\"Example\">\n  <FormControl label=\"Email address\" id=\"valid\" name=\"valid\" formMode=\"light\" valid validated value=\"jsmith@example.com\" readOnly mdxType=\"FormControl\">\n    <Textbox mdxType=\"Textbox\" />\n  </FormControl>\n    </Example>\n    <p>{`The error state is denoted with a red border, a red error icon and a red error message below the textbox field. A good error message clearly describes how to address the input error. The error state only appears when the user clicks/taps away from the textbox field. Once the user corrects the textbox input error, the error state is replaced with the success state.`}</p>\n    <Example mdxType=\"Example\">\n  <FormControl label=\"Email address\" id=\"invalid\" name=\"invalid\" formMode=\"light\" validated error=\"Please enter a valid email address.\" value=\"jsmith@example\" readOnly mdxType=\"FormControl\">\n    <Textbox mdxType=\"Textbox\" />\n  </FormControl>\n    </Example>\n    <h3 {...{\n      \"id\": \"accessibility-best-practices-for-validation-and-errors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#accessibility-best-practices-for-validation-and-errors\",\n        \"aria-label\": \"accessibility best practices for validation and errors permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Accessibility best practices for validation and errors`}</h3>\n    <ul>\n      <li parentName=\"ul\">{`Validation states must not rely on colour alone to convey the error information as users with visual impairments may skip over this information. Using colour and an appropriate icon is recommended.`}</li>\n      <li parentName=\"ul\">{`Add the `}<inlineCode parentName=\"li\">{`required`}</inlineCode>{` attribute to the textbox field if it's a required field.`}</li>\n      <li parentName=\"ul\">{`Use the appropriate input type attribute.`}</li>\n      <li parentName=\"ul\">{`To help screen reader users, the error message should include a hidden ‘Error:’ before the error message. These users will hear, for example, “Error: Please enter your email address.”.`}</li>\n    </ul>\n    <h2 {...{\n      \"id\": \"related-components\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#related-components\",\n        \"aria-label\": \"related components permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Related components`}</h2>\n    <ul>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/textarea/\"\n        }}>{`Textarea`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/password-textbox/\"\n        }}>{`Password Textbox`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/date-textbox/\"\n        }}>{`Date Textbox`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/form-control/\"\n        }}>{`Form Control`}</a></li>\n    </ul>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}