HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Number InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA number a reader types or steps to.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/number-input'import'@fusion.dev/helix-headless/number-input'Preview
API ReferenceRoothelix-number-inputA number a reader types or steps to.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.decrementLabelstring"Decrease"Accessible name for the control that steps down.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.incrementLabelstring"Increase"Accessible name for the control that steps up.labelstring""The accessible name, and the fallback for the `label` slot.largeStepnumberHow far `PageUp` and `PageDown` move.maxnumberLargest value the reader may reach.minnumberSmallest value the reader may reach.namestring""Name submitted with the form.placeholderstring""Shown while the field is empty.readOnlybooleanfalseWhether the field refuses input while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.scrubbooleanfalseWhether a grip is shown that changes the value when it is dragged.stepnumber1How far one step moves.valuestringWhat the control holds now, and what its form submits.valueAsNumbernumberThe value as a number, or `NaN` while the control is empty.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendAfter it.startBefore the number, for a unit or an icon.
EventTypeDescriptionchangeEventRelayed from the field once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the value changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.select() => voidSelects the number, so typing replaces it.stepDown(large: unknown) => voidSteps the value down, by `largeStep` when `large` is set.stepUp(large: unknown) => voidOne step up, or `PageUp`'s larger one.
PartDescriptioncontrolThe field itself.decrementThe control that steps down.decrement-markThe glyph on the step down control.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.incrementThe control that steps up.increment-markThe glyph on the step up control.labelThe name over the field, which is also the scrub grip.
Roothelix-headless-number-inputA number a reader types or steps to.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.decrementLabelstring"Decrease"Accessible name for the control that steps down.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.incrementLabelstring"Increase"Accessible name for the control that steps up.labelstring""The accessible name, and the fallback for the `label` slot.largeStepnumberHow far `PageUp` and `PageDown` move.maxnumberLargest value the reader may reach.minnumberSmallest value the reader may reach.namestring""Name submitted with the form.placeholderstring""Shown while the field is empty.readOnlybooleanfalseWhether the field refuses input while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.scrubbooleanfalseWhether a grip is shown that changes the value when it is dragged.stepnumber1How far one step moves.valuestringWhat the control holds now, and what its form submits.valueAsNumbernumberThe value as a number, or `NaN` while the control is empty.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendAfter it.startBefore the number, for a unit or an icon.
EventTypeDescriptionchangeEventRelayed from the field once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the value changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.select() => voidSelects the number, so typing replaces it.stepDown(large: unknown) => voidSteps the value down, by `largeStep` when `large` is set.stepUp(large: unknown) => voidOne step up, or `PageUp`'s larger one.
PartDescriptioncontrolThe field itself.decrementThe control that steps down.decrement-markThe glyph on the step down control.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.incrementThe control that steps up.increment-markThe glyph on the step up control.labelThe name over the field, which is also the scrub grip.
ExamplesNameDescriptionBoundedA number in a range, and a number with a step.DisabledDisabled, with and without a value.EventsA step and a keystroke arrive the same way, and the commit is separate from both.InvalidA number outside its range, and what the field says.PreviewA number with buttons to step it.PreviewA number with buttons to step it.ScrubA grip that changes the value when dragged, with coarse and fine.StepsA coarse step for Page Up and Page Down, over a fine one for the arrows.UnitsA unit set beside the number rather than typed into it.