{"componentChunkName":"component---src-pages-components-number-input-code-mdx","path":"/components/number-input/code/","result":{"pageContext":{"frontmatter":{"title":"Number input","description":"Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/number-input/code.mdx","titleType":"prepend","MdxNode":{"id":"982acfb6-0956-5630-be90-a7b80287036c","children":[],"parent":"90eaac31-14fe-5cf7-93c1-1016a8fdac08","internal":{"content":"---\ntitle: Number input\ndescription: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Number input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',\n  }}>\n  {`\n    <NumberInput\n      helperText=\"Optional helper text.\"\n      id=\"tj-input\"\n      invalidText=\"Number is not valid\"\n      label=\"Number Input label\"\n      max={100}\n      min={0}\n      step={10}\n      value={50}\n    />\n    `}\n</ComponentDemo>\n\n## Mobile number input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',\n  }}>\n  {`\n    <NumberInput\n      isMobile\n      helperText=\"Optional helper text.\"\n      id=\"tj-input\"\n      invalidText=\"Number is not valid\"\n      label=\"Number Input label\"\n      max={100}\n      min={0}\n      step={10}\n      value={50}\n    />\n    `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"c6641662b133efac15eff883d401dd3f","counter":1511,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Number input","description":"Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Number input\ndescription: Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Number input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',\n  }}>\n  {`\n    <NumberInput\n      helperText=\"Optional helper text.\"\n      id=\"tj-input\"\n      invalidText=\"Number is not valid\"\n      label=\"Number Input label\"\n      max={100}\n      min={0}\n      step={10}\n      value={50}\n    />\n    `}\n</ComponentDemo>\n\n## Mobile number input\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/numberinput--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-number--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvnumberinput--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=number-input',\n  }}>\n  {`\n    <NumberInput\n      isMobile\n      helperText=\"Optional helper text.\"\n      id=\"tj-input\"\n      invalidText=\"Number is not valid\"\n      label=\"Number Input label\"\n      max={100}\n      min={0}\n      step={10}\n      value={50}\n    />\n    `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/number-input/code.mdx"}}}}