{"componentChunkName":"component---src-pages-components-number-input-usage-mdx","path":"/components/number-input/usage/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/number-input/usage.mdx","titleType":"prepend","MdxNode":{"id":"96dea6ca-1730-5508-94bd-0ed986c8f989","children":[],"parent":"106ac1c8-0772-5e44-b054-8f7143462fa3","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']\n---\n\n## General guidance\n\n_Number inputs_ are similar to text inputs, but contain controls used to increase or decrease an incremental value.\n\n## Format\n\n- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that only require a few clicks.\n- Enable the user to also choose to type a number in the field.\n- Ensure that a default value is shown within the field.\n- Use a clear and concise label for the number input.\n- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label.\n- See further guidance for using number labels within [forms](/components/form/usage).\n\n<Row>\n<Column colLg={8}>\n\n![number input example](images/number-input-usage-1.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"6903d9e4aa492ce581844a2a7c59fff7","counter":1207,"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"]},"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']\n---\n\n## General guidance\n\n_Number inputs_ are similar to text inputs, but contain controls used to increase or decrease an incremental value.\n\n## Format\n\n- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that only require a few clicks.\n- Enable the user to also choose to type a number in the field.\n- Ensure that a default value is shown within the field.\n- Use a clear and concise label for the number input.\n- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label.\n- See further guidance for using number labels within [forms](/components/form/usage).\n\n<Row>\n<Column colLg={8}>\n\n![number input example](images/number-input-usage-1.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/number-input/usage.mdx"}}}}