{"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":"41485f6b-182b-55f5-a08c-d1221d7ab91c","children":[],"parent":"cd148efb-e8a9-5f54-aa96-687d3f7ca6ba","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  {`\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  {`\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  {`\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":"a6088407e2c8d1c862b80fe2e952f016","counter":1561,"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  {`\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  {`\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  {`\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/3b23ef32/src/pages/components/text-input/code.mdx"}}}}