{"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":"f9325d47-a115-54ff-8cc5-d5f7d86d7c63","children":[],"parent":"1c3c7eeb-1b1c-5b11-a12a-2a8f2c4c3cb2","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  {`\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":"955e3e5cb0ef9254091fde61bf375f30","counter":1489,"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  {`\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/3b23ef32/src/pages/components/form/code.mdx"}}}}