{"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":"1e39dd88-4e18-5a11-b456-dbbcd68023fe","children":[],"parent":"c355ca07-adbf-592f-ba5b-5396066b0b00","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":"588b38225e266860958aecb7cb695b67","counter":1545,"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/1dde86ed/src/pages/components/number-input/usage.mdx"}}}}