{"componentChunkName":"component---src-pages-components-number-input-usage-mdx","path":"/components/number-input/usage/","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":"5f772ca5-15cc-50d7-86d9-c2e8e5fbc636","children":[],"parent":"20f967ef-7f07-5fe6-81f2-809b92c9c32d","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":"8b423c4d7ac34532f02e59cd27eab1b4","counter":1363,"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":"/zeit/1252fd04/src/pages/components/number-input/usage.mdx"}}}}