{"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":"1318a4db-ae51-5ae3-aded-0ca22d76cdbb","children":[],"parent":"a2f8dbf8-7f6f-5aa5-87fb-6d43b98fc177","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":"e882d557ba095c8526ca9886d315e1de","counter":1358,"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/3ed0734e/src/pages/components/number-input/usage.mdx"}}}}