@commercetools/nimbus-mcp 0.1.0 → 2.10.0

package/data/docs/routes/components-inputs-number-input.json

@@ -0,0 +1,647 @@
+{
+  "meta": {
+    "id": "Components-NumberInput",
+    "title": "Number input",
+    "exportName": "NumberInput",
+    "description": "A number input allows users to enter numerical values and adjust them incrementally.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/number-input/number-input.mdx",
+    "menu": [
+      "Components",
+      "Inputs",
+      "Number input"
+    ],
+    "route": "components/inputs/number-input",
+    "tags": [
+      "component",
+      "number",
+      "input",
+      "numeric",
+      "stepper"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Visual options",
+        "href": "#visual-options",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Appearance",
+        "href": "#appearance",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nA number input allows users to enter a numeric value and adjust it using stepper\nbuttons. It provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\n### Key features\n\n- **Value Clamping:** If a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- **Decimals:** Supports decimal values and step sizes.\n- **Percentages:** Can be configured to display values as percentages,\n  automatically multiplying input by 100 for display and dividing by 100 for\n  output.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?m=auto&node-id=3889-9640)\n\n## Variables\n\nGet familiar with the features.\n\n### Visual options\n\n#### Size\n\nMedium is the default size, with a small size for compact needs.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <NumberInput size=\"md\" defaultValue={123} />\n    <NumberInput size=\"sm\" defaultValue={123} />\n  </Stack>\n)\n```\n\n#### Appearance\n\nMedium is the default size, with a small size for compact needs.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <NumberInput defaultValue={123} />\n    <NumberInput size=\"sm\" defaultValue={123} />\n  </Stack>\n)\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nA number input allows users to enter a numeric value and adjust it using stepper\nbuttons. It provides a quick and precise way to modify values within defined\nparameters, especially for small incremental changes.\n\n### Key features\n\n- **Value Clamping:** If a user types a value outside the defined min or max\n  range, the value will snap to the nearest valid step or the min/max value on\n  blur.\n- **Decimals:** Supports decimal values and step sizes.\n- **Percentages:** Can be configured to display values as percentages,\n  automatically multiplying input by 100 for display and dividing by 100 for\n  output.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?m=auto&node-id=3889-9640)\n\n## Variables\n\nGet familiar with the features.\n\n### Visual options\n\n#### Size\n\nMedium is the default size, with a small size for compact needs.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <NumberInput size=\"md\" defaultValue={123} />\n    <NumberInput size=\"sm\" defaultValue={123} />\n  </Stack>\n)\n```\n\n#### Appearance\n\nMedium is the default size, with a small size for compact needs.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\" gap=\"400\" alignItems=\"center\">\n    <NumberInput defaultValue={123} />\n    <NumberInput size=\"sm\" defaultValue={123} />\n  </Stack>\n)\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual options",
+          "href": "#visual-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Appearance",
+          "href": "#appearance",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <NumberInput\n    defaultValue={10}\n    aria-label=\"Quantity\"\n    min={1}\n    max={100}\n    step={1}\n  />\n)\n```\n\n### Accessibility standards\n\n- Always provide a visible label for the input.\n- If a visible label is not used, provide an `aria-label` or `aria-labelledby`\n  for screen readers.\n- Ensure sufficient color contrast for all elements (text, borders, icons).\n- Communicate errors clearly, using both visual cues (e.g., color) and\n  descriptive error messages.\n- Clearly indicate the focused state.\n- Support keyboard navigation with arrow keys, scroll wheel, and modifier keys.\n- Provide clear feedback for value changes and constraints.\n\n### Resources\n\n- [React Spectrum NumberField](https://react-spectrum.adobe.com/react-spectrum/NumberField.html)\n- [W3C ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/)\n  (Search for \"spinbutton\" or \"number input\" patterns)\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { NumberInput, type NumberInputProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation uses uncontrolled mode:\n\n```jsx live-dev\nconst App = () => (\n  <NumberInput placeholder=\"Enter a number\" />\n)\n```\n\n## Usage examples\n\n### Size options\n\nThe `sm` and `md` size variants are available to match your interface density:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput size=\"sm\" placeholder=\"Small input\" />\n    <NumberInput size=\"md\" placeholder=\"Medium input (default)\" />\n  </Stack>\n)\n```\n\n### Visual variants\n\nChoose between `solid` and `ghost` variants to match your design context:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput variant=\"solid\" placeholder=\"Solid variant (default)\" />\n    <NumberInput variant=\"ghost\" placeholder=\"Ghost variant\" />\n  </Stack>\n)\n```\n\n### Leading and trailing elements\n\nAdd icons, buttons, or other elements before or after the input using `leadingElement` and `trailingElement` props:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput\n      placeholder=\"Quantity\"\n      leadingElement={<Icons.ShoppingCart />}\n    />\n    <NumberInput\n      placeholder=\"Amount\"\n      leadingElement={<Icons.AttachMoney />}\n      trailingElement={<Icons.TrendingUp />}\n    />\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- Elements automatically respect text direction (LTR/RTL)\n- Leading element appears at the start (left in LTR, right in RTL)\n- Trailing element appears before increment/decrement buttons\n- Icon sizing automatically adjusts based on the `size` prop\n\n### Number constraints\n\nControl the acceptable range and increment values using `minValue`, `maxValue`, and `step` props:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Range constraint (1-100):</Text>\n      <NumberInput\n        placeholder=\"Enter 1-100\"\n        minValue={1}\n        maxValue={100}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Step increment (multiples of 5):</Text>\n      <NumberInput\n        placeholder=\"Multiples of 5\"\n        step={5}\n        defaultValue={0}\n      />\n    </Stack>\n \n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Combining constraints (10-100, step 10):</Text>\n      <NumberInput\n        placeholder=\"10, 20, 30...\"\n        minValue={10}\n        maxValue={100}\n        step={10}\n      />\n    </Stack>\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- `minValue` and `maxValue` enforce valid ranges\n- Increment/decrement buttons respect these limits\n- Users can still type values outside the range, but validation will apply\n- `step` determines the increment/decrement amount (default is 1)\n\n### Decimal numbers\n\nSupport decimal precision by setting the `step` prop to a decimal value:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Two decimal places (step 0.01):</Text>\n      <NumberInput\n        placeholder=\"0.00\"\n        step={0.01}\n        defaultValue={0}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">One decimal place (step 0.1):</Text>\n      <NumberInput\n        placeholder=\"0.0\"\n        step={0.1}\n        defaultValue={0}\n      />\n    </Stack>\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- `step` value determines decimal precision\n- Increment/decrement buttons adjust by the step amount\n- Users can type any decimal value\n- Use with `minValue={0}` for positive-only numbers (prices, quantities)\n\n### Format options\n\nCustomize number display using `formatOptions`, which leverages the [Intl.NumberFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) for sophisticated formatting:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Currency (USD):</Text>\n      <NumberInput\n        defaultValue={1234.56}\n        formatOptions={{\n          style: 'currency',\n          currency: 'USD'\n        }}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Currency (EUR):</Text>\n      <NumberInput\n        defaultValue={1234.56}\n        formatOptions={{\n          style: 'currency',\n          currency: 'EUR',\n          currencyDisplay: 'code'\n        }}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Percentage:</Text>\n      <NumberInput\n        defaultValue={0.85}\n        step={0.01}\n        minValue={0}\n        maxValue={1}\n        formatOptions={{\n          style: 'percent',\n          minimumFractionDigits: 0,\n          maximumFractionDigits: 2\n        }}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Unit (kilograms):</Text>\n      <NumberInput\n        defaultValue={45.5}\n        step={0.1}\n        formatOptions={{\n          style: 'unit',\n          unit: 'kilogram',\n          unitDisplay: 'short'\n        }}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Compact notation (millions):</Text>\n      <NumberInput\n        defaultValue={1500000}\n        step={100000}\n        formatOptions={{\n          notation: 'compact',\n          compactDisplay: 'short'\n        }}\n      />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">Scientific notation:</Text>\n      <NumberInput\n        defaultValue={12345}\n        step={1000}\n        formatOptions={{\n          notation: 'scientific',\n          maximumFractionDigits: 2\n        }}\n      />\n    </Stack>\n  </Stack>\n)\n```\n\n**Common format options:**\n- **Currency**: `{ style: 'currency', currency: 'USD' }` - Formats as money\n- **Percentage**: `{ style: 'percent' }` - Formats decimals as percentages (0.85 → 85%)\n- **Unit**: `{ style: 'unit', unit: 'kilogram' }` - Adds unit labels\n- **Compact**: `{ notation: 'compact' }` - Short form (1,500,000 → 1.5M)\n- **Scientific**: `{ notation: 'scientific' }` - Exponential notation (12345 → 1.23E4)\n\n**Precision control:**\n- `minimumFractionDigits` - Minimum decimal places\n- `maximumFractionDigits` - Maximum decimal places\n- `minimumSignificantDigits` - Minimum significant digits\n- `maximumSignificantDigits` - Maximum significant digits\n\n**Behavioral notes:**\n- Format options affect display only, not the underlying numeric value\n- Parsing automatically handles formatted input\n- Combine with `step` for appropriate increment/decrement amounts\n- Format options work with locale formatting (see Locale formatting section)\n\n### Disabled state\n\nDisable input interaction with the `isDisabled` prop:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput placeholder=\"Enabled input\" />\n    <NumberInput placeholder=\"Disabled input\" isDisabled />\n    <NumberInput\n      value={42}\n      isDisabled\n      onChange={() => {}}\n    />\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- Increment and decrement buttons are also disabled\n- Input cannot receive focus or accept keyboard input\n- Visual styling indicates disabled state\n\n### Invalid state\n\nMark inputs as invalid for validation feedback:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput\n      placeholder=\"Valid input\"\n      value={50}\n      onChange={() => {}}\n    />\n    <NumberInput\n      placeholder=\"Invalid input\"\n      value={150}\n      isInvalid\n      onChange={() => {}}\n    />\n  </Stack>\n)\n```\n\n### Read-only state\n\nUse `isReadOnly` to display values without allowing editing:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput\n      value={42}\n      onChange={() => {}}\n    />\n    <NumberInput\n      value={42}\n      isReadOnly\n      onChange={() => {}}\n    />\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- Users can select and copy text but cannot edit\n- Increment and decrement buttons are disabled in read-only mode\n- Input still receives focus for accessibility\n\n### Required field\n\nMark inputs as required using the `isRequired` prop:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <NumberInput\n      placeholder=\"Optional field\"\n    />\n    <NumberInput\n      placeholder=\"Required field\"\n      isRequired\n    />\n  </Stack>\n)\n```\n\n### Uncontrolled mode\n\nFor simpler use cases, use uncontrolled mode with `defaultValue` and `onChange`:\n\n```jsx live-dev\nconst App = () => {\n  const [displayValue, setDisplayValue] = useState<number | undefined>(undefined);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <NumberInput\n        placeholder=\"Type a number...\"\n        defaultValue={0}\n        onChange={(value) => {\n          setDisplayValue(value);\n        }}\n      />\n      <Text fontSize=\"sm\">\n        Current value: {displayValue !== undefined ? displayValue : '(not set)'}\n      </Text>\n    </Stack>\n  );\n}\n```\n\nUse uncontrolled mode when you need to capture the number value without managing state yourself.\n\n**Note:** NumberInput's `onChange` receives the number value directly, not an event object.\n\n### Controlled mode\n\nFor scenarios requiring programmatic control or coordination with other components, use controlled mode:\n\n```jsx live-dev\nconst App = () => {\n  const [value, setValue] = useState<NumberInputProps[\"value\"]>(0);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <NumberInput\n        value={value}\n        onChange={setValue}\n        placeholder=\"Controlled input\"\n        minValue={0}\n        maxValue={100}\n      />\n      <Text fontSize=\"sm\">\n        {value !== undefined ? `Value: ${value}` : 'No value'}\n      </Text>\n      <Stack direction=\"row\" gap=\"300\">\n        <Button onPress={() => setValue(0)}>\n          Reset to 0\n        </Button>\n        <Button onPress={() => setValue(50)}>\n          Set to 50\n        </Button>\n        <Button onPress={() => setValue(100)}>\n          Set to 100\n        </Button>\n      </Stack>\n    </Stack>\n  );\n}\n```\n\nUse controlled mode when you need to:\n- Synchronize the value with external state\n- Validate or transform input values\n- Clear or programmatically set the value\n- React to changes in real-time\n\n### Locale formatting\n\nNumberInput automatically formats numbers according to the user's locale when using React Aria's I18nProvider:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">US English (default):</Text>\n      <NumberInput defaultValue={1234.56} placeholder=\"1,234.56\" />\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">German (de-DE):</Text>\n      <NimbusI18nProvider locale=\"de-DE\">\n        <NumberInput defaultValue={1234.56} placeholder=\"1.234,56\" />\n      </NimbusI18nProvider>\n    </Stack>\n\n    <Stack direction=\"column\" gap=\"200\">\n      <Text fontSize=\"sm\" color=\"neutral.11\">French (fr-FR):</Text>\n      <NimbusI18nProvider locale=\"fr-FR\">\n        <NumberInput defaultValue={1234.56} placeholder=\"1 234,56\" />\n      </NimbusI18nProvider>\n    </Stack>\n  </Stack>\n)\n```\n\n**Behavioral notes:**\n- Number formatting automatically adapts to the locale\n- Thousands separators and decimal symbols change based on locale\n- Input parsing handles locale-specific formats\n- Wrap your app with `NimbusI18nProvider` to set the locale\n\n## Component requirements\n\n## Accessibility\n\nThe NumberInput handles most accessibility requirements internally. However, you must always associate an internationalized label with the component. Visual labels are preferable, and can be set by:\n\n- Using the `NumberInputField` pattern component (recommended)\n- Associating a `<label>` element with the `NumberInput` using `aria-labelledby`:\n\n```tsx\n<label id=\"quantity-label\">\n  {msg.format(quantityMessage)}\n</label>\n<NumberInput aria-labelledby=\"quantity-label\" />\n```\n\n- Associating a `<label>` element with the `NumberInput` using `htmlFor`:\n\n```tsx\n<label htmlFor=\"quantity-input\">\n  {msg.format(quantityMessage)}\n</label>\n<NumberInput id=\"quantity-input\" />\n```\n\nIf your design requires that the label should not be visible, the label should be set using the `aria-label` prop:\n\n```tsx\n<NumberInput aria-label={msg.format(quantityMessage)} />\n```\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"product-quantity-input\";\n\nexport const QuantityField = () => (\n  <NumberInput id={PERSISTENT_ID} placeholder=\"Quantity\" />\n);\n```\n\n#### Keyboard navigation\n\nThe component supports full keyboard interaction:\n- `Tab` / `Shift+Tab`: Navigate to/from the input field\n- `Arrow Up` / `Arrow Down`: Increment/decrement the value by `step` amount\n- `Page Up` / `Page Down`: Increment/decrement by larger amounts (10x step)\n- `Home`: Set to minimum value (if `minValue` is defined)\n- `End`: Set to maximum value (if `maxValue` is defined)\n- `Enter`: Submit form (if inside a form)\n- Standard text editing shortcuts: Cut, Copy, Paste, Undo, Redo\n\n**Increment/Decrement buttons:**\n- Click on increment (up arrow) or decrement (down arrow) buttons to adjust value\n- Buttons are automatically disabled when reaching `minValue` or `maxValue`\n- Buttons have localized aria-labels for screen readers\n\n#### Click-to-focus behavior\n\nClicking anywhere within the input container (including leading/trailing elements area) will focus the input field, providing a larger interactive target for better usability.\n\n## API reference\n\n<PropsTable id=\"NumberInput\" />\n\n## Common patterns\n\n### Quantity selector with constraints\n\nCreate a quantity input with minimum and maximum values:\n\n```jsx live-dev\nconst App = () => {\n  const [quantity, setQuantity] = useState<number>(1);\n  const totalPrice = quantity * 29.99;\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Stack direction=\"column\" gap=\"200\">\n        <Text fontWeight=\"semibold\">Select Quantity</Text>\n        <NumberInput\n          value={quantity}\n          onChange={(value) => setQuantity(value ?? 1)}\n          minValue={1}\n          maxValue={10}\n          step={1}\n        />\n        <Text fontSize=\"sm\" color=\"neutral.11\">\n          Minimum: 1, Maximum: 10\n        </Text>\n      </Stack>\n      <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n        <Text>Total:</Text>\n        <Text fontWeight=\"bold\" fontSize=\"lg\">\n          ${totalPrice.toFixed(2)}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n}\n```\n\n### Measurement input with units\n\nCreate inputs for measurements with unit labels displayed as trailing elements:\n\n```jsx live-dev\nconst App = () => {\n  const [weight, setWeight] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const bmi = weight && height ? (weight / Math.pow(height / 100, 2)).toFixed(1) : 0;\n\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      <Stack direction=\"column\" gap=\"300\">\n        <Text fontWeight=\"semibold\">Weight</Text>\n        <NumberInput\n          value={weight}\n          onChange={(value) => setWeight(value ?? 0)}\n          placeholder=\"0\"\n          minValue={0}\n          maxValue={300}\n          step={0.1}\n          trailingElement={<Text fontSize=\"sm\" color=\"neutral.11\">kg</Text>}\n        />\n      </Stack>\n\n      <Stack direction=\"column\" gap=\"300\">\n        <Text fontWeight=\"semibold\">Height</Text>\n        <NumberInput\n          value={height}\n          onChange={(value) => setHeight(value ?? 0)}\n          placeholder=\"0\"\n          minValue={0}\n          maxValue={250}\n          step={1}\n          trailingElement={<Text fontSize=\"sm\" color=\"neutral.11\">cm</Text>}\n        />\n      </Stack>\n\n      {weight > 0 && height > 0 && (\n        <Stack direction=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n          <Text>BMI:</Text>\n          <Text fontWeight=\"bold\" fontSize=\"lg\">{bmi}</Text>\n        </Stack>\n      )}\n    </Stack>\n  );\n}\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using NumberInput within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Rendering Tests\n\nVerify the component renders with expected elements\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NumberInput, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"NumberInput - Basic rendering\", () => {\n  it(\"renders input element\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\", { name: /quantity/i });\n    expect(input).toBeInTheDocument();\n    expect(input.tagName).toBe(\"INPUT\");\n  });\n\n  it(\"renders with placeholder text\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput placeholder=\"Enter quantity\" aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByPlaceholderText(/enter quantity/i)).toBeInTheDocument();\n  });\n\n  it(\"renders increment and decrement buttons\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: /increment/i })\n    ).toBeInTheDocument();\n    expect(\n      screen.getByRole(\"button\", { name: /decrement/i })\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### Interaction Tests\n\nTest user interactions with the number input\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NumberInput, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"NumberInput - Interactions\", () => {\n  it(\"handles typing numeric values\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <NumberInput aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.type(input, \"42\");\n\n    expect(input).toHaveValue(\"42\");\n  });\n\n  it(\"calls onChange with numeric value\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput onChange={handleChange} aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.clear(input);\n    await user.type(input, \"10\");\n    // Blur the input to trigger onChange\n    await user.tab();\n\n    // NumberInput calls onChange with the numeric value after blur\n    expect(handleChange).toHaveBeenCalled();\n    expect(handleChange).toHaveBeenCalledWith(10);\n  });\n\n  /**\n   * Note: React Aria's stepper buttons use pointer events that JSDOM doesn't\n   * fully support. These tests use keyboard-based interactions (ArrowUp/ArrowDown)\n   * which test the same onChange behavior through a different, equally valid\n   * user interaction pattern. Storybook play functions should test actual\n   * button clicks in a real browser environment.\n   */\n  it(\"handles increment via keyboard\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={5}\n          onChange={handleChange}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n    await user.keyboard(\"{ArrowUp}\");\n\n    expect(handleChange).toHaveBeenCalledWith(6);\n  });\n\n  it(\"handles decrement via keyboard\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={5}\n          onChange={handleChange}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n    await user.keyboard(\"{ArrowDown}\");\n\n    expect(handleChange).toHaveBeenCalledWith(4);\n  });\n});\n```\n\n### Testing Constraints\n\nVerify minimum, maximum, and step constraints\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NumberInput, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"NumberInput - Constraints\", () => {\n  it(\"respects minimum value\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={2}\n          minValue={1}\n          onChange={handleChange}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n\n    // Decrement once: 2 -> 1 (at minimum)\n    await user.keyboard(\"{ArrowDown}\");\n    expect(handleChange).toHaveBeenCalledWith(1);\n\n    // Try again - should stay at minimum\n    await user.keyboard(\"{ArrowDown}\");\n    // Component still calls onChange but with the same minimum value\n    expect(handleChange).toHaveBeenLastCalledWith(1);\n  });\n\n  it(\"respects maximum value\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={9}\n          maxValue={10}\n          onChange={handleChange}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n\n    // Increment once: 9 -> 10 (at maximum)\n    await user.keyboard(\"{ArrowUp}\");\n    expect(handleChange).toHaveBeenCalledWith(10);\n\n    // Try again - should stay at maximum\n    await user.keyboard(\"{ArrowUp}\");\n    // Component still calls onChange but with the same maximum value\n    expect(handleChange).toHaveBeenLastCalledWith(10);\n  });\n\n  it(\"increments by step amount\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={0}\n          step={5}\n          onChange={handleChange}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n    await user.keyboard(\"{ArrowUp}\");\n\n    expect(handleChange).toHaveBeenCalledWith(5);\n  });\n});\n```\n\n### Testing Validation States\n\nVerify different component states render correctly\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NumberInput, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"NumberInput - Validation states\", () => {\n  it(\"handles disabled state\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <NumberInput isDisabled aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    const incrementButton = screen.getByRole(\"button\", { name: /increment/i });\n\n    expect(input).toBeDisabled();\n    expect(incrementButton).toBeDisabled();\n\n    // Verify cannot type when disabled\n    await user.type(input, \"42\");\n    expect(input).toHaveValue(\"\");\n  });\n\n  it(\"handles invalid state\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput isInvalid aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    expect(input).toHaveAttribute(\"data-invalid\", \"true\");\n  });\n\n  it(\"handles required state\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput isRequired aria-label=\"Quantity\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    expect(input).toHaveAttribute(\"aria-required\", \"true\");\n  });\n\n  it(\"handles read-only state\", () => {\n    render(\n      <NimbusProvider>\n        <NumberInput\n          isReadOnly\n          value={42}\n          onChange={() => {}}\n          aria-label=\"Quantity\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    const incrementButton = screen.getByRole(\"button\", { name: /increment/i });\n\n    expect(input).toHaveAttribute(\"readonly\");\n    expect(incrementButton).toBeDisabled();\n  });\n});\n```\n\n### Testing Decimal Precision\n\nTest precision handling for decimal numbers\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NumberInput, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"NumberInput - Decimal precision\", () => {\n  it(\"handles decimal step increments\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput\n          defaultValue={0}\n          step={0.1}\n          onChange={handleChange}\n          aria-label=\"Price\"\n        />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.click(input);\n    await user.keyboard(\"{ArrowUp}\");\n\n    expect(handleChange).toHaveBeenCalledWith(0.1);\n  });\n\n  it(\"accepts decimal input\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n    render(\n      <NimbusProvider>\n        <NumberInput step={0.01} onChange={handleChange} aria-label=\"Price\" />\n      </NimbusProvider>\n    );\n\n    const input = screen.getByRole(\"textbox\");\n    await user.clear(input);\n    await user.type(input, \"12.34\");\n    // Blur the input to trigger onChange\n    await user.tab();\n\n    // NumberInput calls onChange with the numeric value after blur\n    expect(handleChange).toHaveBeenCalled();\n    expect(handleChange).toHaveBeenCalledWith(12.34);\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-numberinput--docs)\n- [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Leading and trailing elements",
+          "href": "#leading-and-trailing-elements",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Number constraints",
+          "href": "#number-constraints",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Decimal numbers",
+          "href": "#decimal-numbers",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Format options",
+          "href": "#format-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Invalid state",
+          "href": "#invalid-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Read-only state",
+          "href": "#read-only-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Required field",
+          "href": "#required-field",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled mode",
+          "href": "#uncontrolled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled mode",
+          "href": "#controlled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Locale formatting",
+          "href": "#locale-formatting",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Click-to-focus behavior",
+          "href": "#click-to-focus-behavior",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Quantity selector with constraints",
+          "href": "#quantity-selector-with-constraints",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Measurement input with units",
+          "href": "#measurement-input-with-units",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering Tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction Tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing Constraints",
+          "href": "#testing-constraints",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing Validation States",
+          "href": "#testing-validation-states",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing Decimal Precision",
+          "href": "#testing-decimal-precision",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nNumber input guidelines focus on clear labels, suitable ranges, easy interaction\nvia keyboard and buttons, and strong error handling, all while following WCAG\naccessibility rules.\n\n### Best practices\n\n- **Labels:** Always include a concise and clear label using sentence case.\n  Labels should not be hidden. In the rare case where context is sufficient and\n  label can be absent, review the design with an accessibility expert.\n- **Default values:** Provide a clear default value (e.g., '1' for quantity, '0'\n  for children) that is likely to be the most common selection. Avoid leaving\n  the input blank.\n- **Helper text:** Use helper text to indicate maximum or minimum values, or\n  other constraints. It is optional and is replaced by error messages during\n  validation.\n- **Increment size:** Determine an increment size that is relative to the value\n  range. For example, use increments of 1 for a 0-10 range and increments of 10\n  for a 0-100 range.\n- **Unit symbols:** Include unit symbols to the right of the input field or\n  increase button when applicable, using standard abbreviations.\n- **Read-only state:** Use when the user can view but not modify the value.\n- **Disabled state:** Use when the number input is not interactive.\n- **Validation:**\n  - Provide clear and concise error messages below the input field, replacing\n    any helper text.\n  - Highlight errors visually, for example, with a red border and an error icon.\n  - Avoid immediate validation that may frustrate users; allow them to complete\n    their input before displaying validation results.\n\n### Usage\n\nA number input lets users enter and adjust a numeric value with stepper buttons,\nbest for small, incremental changes within set limits.\n\n> [!TIP]\\\n> When to use\n\n- **Numeric values:** When the input is exclusively a number (e.g., quantity,\n  age).\n- **Small, incremental adjustments:** When users need to change values by a few\n  clicks, or relative to the current state, without knowing exact figures.\n- **Bypassing keyboard limitations:** Particularly useful for mobile devices\n  where direct numerical input might be cumbersome.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Large value changes:** When a wide range of values requires many clicks\n  (e.g., 1 to 300); a slider is more appropriate.\n- **Continuous variables:** For values like prices or distances where exact,\n  precise input within a wide range is crucial; a text input is better.\n- **Infinite numeric ranges:** Without defined limits, users are unsure of\n  \"reasonable\" values, causing frustration. Storing infinite values on the\n  backend is often unfeasible; applications need concrete data.\n- **Non-mathematical numbers:** Values like credit card numbers, phone numbers,\n  or postal codes, which are strings despite containing digits.\n\n### Keeping interactions simple\n\nSimple interactions are vital because they minimize user effort and cognitive\nload, allowing for quick and efficient value management.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use for quantifiable numeric values.\n> - Provide clear and concise labels.\n> - Set appropriate min and max values.\n> - Define a logical step value.\n> - Include units (e.g., \"$\", \"kg\", \"%\") as prefixes or suffixes.\n> - Allow keyboard interaction for incrementing and decrementing.\n> - Provide helpful error messages for invalid input.\n> - Design for clear visual feedback in all states (hover, focus, disabled,\n>   invalid).\n\n```jsx live\nconst App = () => (\n  <Grid templateColumns=\"auto 1fr\" gap=\"400\">\n    <Image\n      width=\"4000\"\n      src=\"/images/number-input/pencil-sample.png\"\n      alt=\"Number 2 pencils\"\n    />\n    <Stack gap=\"200\" alignItems=\"start\">\n      <Text fontWeight=\"700\">#2 Pencils</Text>\n      <FormField.Root>\n        <FormField.Label>Quantity</FormField.Label>\n        <FormField.Input>\n          <NumberInput defaultValue={12} width=\"2400\" />\n        </FormField.Input>\n      </FormField.Root>\n      <Button variant=\"solid\" colorPalette=\"primary\">\n        Add to cart\n      </Button>\n    </Stack>\n  </Grid>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Use for non-numeric input (e.g., phone numbers that are better suited for\n>   text fields to allow for formatting).\n> - Omit clear labels or help text.\n> - Forget to set min and max values when there are constraints.\n> - Use excessively small or large step values that hinder usability.\n> - Rely solely on visual cues for accessibility; use ARIA attributes.\n> - Present a number input without clear feedback for different states.\n\n```jsx live\nconst App = () => (\n  <FormField.Root>\n    <FormField.Label>Birthdate</FormField.Label>\n    <FormField.Input>\n      <NumberInput placeholder=\"01/01/1990\" />\n    </FormField.Input>\n  </FormField.Root>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keeping interactions simple",
+          "href": "#keeping-interactions-simple",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}