{"componentChunkName":"component---src-pages-components-form-code-mdx","path":"/components/form/code/","result":{"pageContext":{"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/form/code.mdx","titleType":"prepend","MdxNode":{"id":"a818a34c-5377-5454-9bdb-b39f17673a24","children":[],"parent":"a41fed45-f979-5dc7-8964-03ec8c8be7c2","internal":{"content":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Form\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/form--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvform--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=form',\n  }}\n  knobs={{\n    TextInput: ['disabled', 'invalid', 'light', 'type'],\n    TextArea: ['disabled', 'invalid', 'light'],\n    Select: ['disabled', 'invalid', 'light', 'inline'],\n    SelectItem: ['disabled', 'hidden'],\n  }}>\n  {`\n  <Form>\n  <FormGroup>\n    <TextInput\n      helperText=\"Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)\"\n      id=\"test2\"\n      invalidText=\"Invalid error message.\"\n      labelText=\"Text Input label\"\n      placeholder=\"Placeholder text\"\n    />\n  </FormGroup>\n  <FormGroup>\n  <TextArea\n    cols={50}\n    helperText=\"Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)\"\n    id=\"test5\"\n    invalidText=\"Invalid error message.\"\n    labelText=\"Text Area label\"\n    placeholder=\"Placeholder text\"\n    rows={4}\n  />\n  </FormGroup>\n  <FormGroup>\n    <Select\n      defaultValue=\"placeholder-item\"\n      id=\"select-1\"\n      invalidText=\"This is an invalid error message.\"\n      labelText=\"Select\"\n    >\n      <SelectItem\n        text=\"Option 1\"\n        value=\"option-1\"\n      />\n      <SelectItem\n        text=\"Option 2\"\n        value=\"option-2\"\n      />\n      <SelectItem\n        text=\"Option 3\"\n        value=\"option-3\"\n      />\n    </Select>\n  </FormGroup>\n  <Button\n    kind=\"primary\"\n    tabIndex={0}\n    type=\"submit\"\n  >\n    Submit\n  </Button>\n</Form>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"e72a23b66c0b2689100cc329471922bc","counter":1483,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Form\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/form--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-input--label',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvform--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=form',\n  }}\n  knobs={{\n    TextInput: ['disabled', 'invalid', 'light', 'type'],\n    TextArea: ['disabled', 'invalid', 'light'],\n    Select: ['disabled', 'invalid', 'light', 'inline'],\n    SelectItem: ['disabled', 'hidden'],\n  }}>\n  {`\n  <Form>\n  <FormGroup>\n    <TextInput\n      helperText=\"Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)\"\n      id=\"test2\"\n      invalidText=\"Invalid error message.\"\n      labelText=\"Text Input label\"\n      placeholder=\"Placeholder text\"\n    />\n  </FormGroup>\n  <FormGroup>\n  <TextArea\n    cols={50}\n    helperText=\"Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)\"\n    id=\"test5\"\n    invalidText=\"Invalid error message.\"\n    labelText=\"Text Area label\"\n    placeholder=\"Placeholder text\"\n    rows={4}\n  />\n  </FormGroup>\n  <FormGroup>\n    <Select\n      defaultValue=\"placeholder-item\"\n      id=\"select-1\"\n      invalidText=\"This is an invalid error message.\"\n      labelText=\"Select\"\n    >\n      <SelectItem\n        text=\"Option 1\"\n        value=\"option-1\"\n      />\n      <SelectItem\n        text=\"Option 2\"\n        value=\"option-2\"\n      />\n      <SelectItem\n        text=\"Option 3\"\n        value=\"option-3\"\n      />\n    </Select>\n  </FormGroup>\n  <Button\n    kind=\"primary\"\n    tabIndex={0}\n    type=\"submit\"\n  >\n    Submit\n  </Button>\n</Form>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/form/code.mdx"}}}}