{"componentChunkName":"component---src-pages-components-number-input-usage-mdx","path":"/components/number-input/usage/","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/usage.mdx","titleType":"prepend","MdxNode":{"id":"a11e1e18-2789-5710-baad-cab33ef7894f","children":[],"parent":"cec085ce-9336-5c03-9f3d-33b509f35284","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## 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":"75f9463b7720e9bcf03031209c4a2180","counter":1539,"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## 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/512c25b6/src/pages/components/number-input/usage.mdx"}}}}