{"name":"number-input","title":"Number Input","description":"A number input with increment/decrement steppers, min/max/step constraints, and a scrub area.","installCommand":"bunx marko-ui add number-input -y","usageTags":"<NumberInput>","importSnippet":"import NumberInput from \"@/components/ui/number-input/number-input.marko\";","usageSnippet":"<NumberInput defaultValue=\"0\" min=0 max=100 step=5/>","tags":["NumberInput"],"parts":[],"props":[{"name":"allowMouseWheel","type":"boolean | undefined","required":false,"description":"Whether to allow mouse wheel to change the value"},{"name":"allowOverflow","type":"boolean | undefined","required":false,"default":"true","description":"Whether to allow the value overflow the min/max range"},{"name":"clampValueOnBlur","type":"boolean | undefined","required":false,"default":"true","description":"Whether to clamp the value when the input loses focus (blur)"},{"name":"defaultValue","type":"string | undefined","required":false,"description":"The initial value of the input when rendered.\nUse when you don't need to control the value of the input."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the number input is disabled."},{"name":"focusInputOnChange","type":"boolean | undefined","required":false,"default":"true","description":"Whether to focus input when the value changes"},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the input element."},{"name":"formatOptions","type":"Intl.NumberFormatOptions | undefined","required":false,"description":"The options to pass to the `Intl.NumberFormat` constructor"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the number input. Useful for composition."},{"name":"inputMode","type":"InputMode | undefined","required":false,"default":"decimal","description":"Hints at the type of data that might be entered by the user. It also determines\nthe type of keyboard shown to the user on mobile devices"},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the number input value is invalid."},{"name":"largeStep","type":"number | undefined","required":false,"description":"The amount to increment or decrement the value by when the `Shift` key is held."},{"name":"locale","type":"string | undefined","required":false,"default":"en-US","description":"The current locale. Based on the BCP 47 definition."},{"name":"max","type":"number | undefined","required":false,"default":"Number.MAX_SAFE_INTEGER","description":"The maximum value of the number input"},{"name":"min","type":"number | undefined","required":false,"default":"Number.MIN_SAFE_INTEGER","description":"The minimum value of the number input"},{"name":"name","type":"string | undefined","required":false,"description":"The name attribute of the number input. Useful for form submission."},{"name":"pattern","type":"string | undefined","required":false,"default":"-?[0-9]*(.[0-9]+)?","description":"The pattern used to check the <input> element's value against"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the number input is readonly"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the number input is required"},{"name":"smallStep","type":"number | undefined","required":false,"description":"The amount to increment or decrement the value by when the `Alt` key is held."},{"name":"spinOnPress","type":"boolean | undefined","required":false,"default":"true","description":"Whether to spin the value when the increment/decrement button is pressed"},{"name":"step","type":"number | undefined","required":false,"default":"1","description":"The amount to increment or decrement the value by"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"value","type":"string | undefined","required":false,"description":"The controlled value of the input"}],"events":[{"name":"onFocusChange","arg":"FocusChangeDetails","description":"Function invoked when the number input is focused"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function invoked when the value changes"},{"name":"onValueCommit","arg":"ValueChangeDetails","description":"Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)"},{"name":"onValueInvalid","arg":"ValueInvalidDetails","description":"Function invoked when the value overflows or underflows the min/max range"},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"number-input-demo","title":"Basic","source":"import NumberInput from \"@marko-ui/shadcn/ui/number-input/number-input.marko\";\n\n<NumberInput defaultValue=\"0\" aria-label=\"Quantity\"/>","description":"An uncontrolled number input with `defaultValue` as its initial value."},{"id":"number-input-min-max-step","title":"Min / max / step","source":"import NumberInput from \"@marko-ui/shadcn/ui/number-input/number-input.marko\";\n\n<NumberInput defaultValue=\"10\" min=0 max=100 step=5 aria-label=\"Quantity\"/>","description":"Constrain the range with `min` and `max`, and set the increment amount with `step`."},{"id":"number-input-disabled","title":"Disabled","source":"import NumberInput from \"@marko-ui/shadcn/ui/number-input/number-input.marko\";\n\n<NumberInput defaultValue=\"0\" disabled aria-label=\"Quantity\"/>","description":"A disabled number input ignores pointer and keyboard input, including the steppers and scrub area."},{"id":"number-input-controlled","title":"Controlled","source":"import NumberInput from \"@marko-ui/shadcn/ui/number-input/number-input.marko\";\n\n<let/value=\"42\"/>\n\n<div class=\"flex items-center gap-4\">\n  <NumberInput\n    aria-label=\"Quantity\"\n    value=value\n    valueChange=(next) => { value = next; }\n    min=0\n    max=999\n  />\n  <span class=\"text-sm text-muted-foreground\">value: ${value}</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}