{"componentChunkName":"component---src-pages-components-text-input-code-mdx","path":"/components/text-input/code/","result":{"pageContext":{"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/text-input/code.mdx","titleType":"prepend","MdxNode":{"id":"f680646e-f652-5694-8d4c-57e7965bc006","children":[],"parent":"9c711c0e-8f85-5e59-b760-1e6d84ad5ad7","internal":{"content":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Text input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',\n  }}\n  knobs={{ TextInput: ['disabled', 'invalid', 'light'] }}>\n  {`\n<FormGroup>\n  <TextInput\n    helperText=\"Optional helper text.\"\n    id=\"test2\"\n    invalidText=\"A valid value is required\"\n    labelText=\"Text Input label\"\n    placeholder=\"Placeholder text\"\n  />\n</FormGroup>\n  `}\n</ComponentDemo>\n\n## Password input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textinput--toggle-password-visibility',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',\n  }}>\n  {`\n<FormGroup>\n<TextInput.PasswordInput\n  helperText=\"Optional helper text.\"\n  hidePasswordLabel=\"Hide password\"\n  id=\"test2\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Text Input label\"\n  placeholder=\"Placeholder text\"\n  showPasswordLabel=\"Show password\"\n/>\n</FormGroup>\n  `}\n</ComponentDemo>\n\n## Text area\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textarea--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--textarea',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-area',\n  }}\n  knobs={{\n    TextArea: ['disabled', 'invalid', 'light'],\n  }}>\n  {`\n<FormGroup>\n<TextArea\n  cols={50}\n  helperText=\"Optional helper text.\"\n  id=\"test2\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Text Area label\"\n  placeholder=\"Placeholder text.\"\n  rows={4}\n/>\n</FormGroup>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"2bcc3f8163b6789cb62d480553590095","counter":1556,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Text input","description":"Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Text input\ndescription: Text inputs enable the user to interact with and input content and data. This component can be used for long and short form entries.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Text input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',\n  }}\n  knobs={{ TextInput: ['disabled', 'invalid', 'light'] }}>\n  {`\n<FormGroup>\n  <TextInput\n    helperText=\"Optional helper text.\"\n    id=\"test2\"\n    invalidText=\"A valid value is required\"\n    labelText=\"Text Input label\"\n    placeholder=\"Placeholder text\"\n  />\n</FormGroup>\n  `}\n</ComponentDemo>\n\n## Password input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textinput--toggle-password-visibility',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-input',\n  }}>\n  {`\n<FormGroup>\n<TextInput.PasswordInput\n  helperText=\"Optional helper text.\"\n  hidePasswordLabel=\"Hide password\"\n  id=\"test2\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Text Input label\"\n  placeholder=\"Placeholder text\"\n  showPasswordLabel=\"Show password\"\n/>\n</FormGroup>\n  `}\n</ComponentDemo>\n\n## Text area\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/textarea--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--textarea',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtextarea--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=text-area',\n  }}\n  knobs={{\n    TextArea: ['disabled', 'invalid', 'light'],\n  }}>\n  {`\n<FormGroup>\n<TextArea\n  cols={50}\n  helperText=\"Optional helper text.\"\n  id=\"test2\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Text Area label\"\n  placeholder=\"Placeholder text.\"\n  rows={4}\n/>\n</FormGroup>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/text-input/code.mdx"}}}}