The Number control provides your component a number value that is editable in the Makeswift builder.


AnchorHTML input element

In this example we use the <input type="number"> element and make the defaultValue, min, and max props controllable with Number controls.

HTML input element panels

import { ReactRuntime } from '@makeswift/runtime/react'
import { Number } from '@makeswift/runtime/controls'

export function NumberComponent({ defaultValue, min, max }) {
  return <input type="number" defaultValue={defaultValue} min={min} max={max} />

ReactRuntime.registerComponent(NumberComponent, {
  type: 'number-component',
  label: 'NumberComponent',
  props: {
    defaultValue: Number({ label: 'Default value', defaultValue: 3 }),
    min: Number({ label: 'Min', defaultValue: 0 }),
    max: Number({ label: 'Max', defaultValue: 10 }),



labelstringno'Number'Text for the panel label.
labelOrientationLabelOrientationno'horizontal'Position of the panel label.
defaultValuenumbernoundefinedWill be used when the value isn't set.
minnumberno0The smallest number that can be set in the panel input.
maxnumbernoInfinityThe largest number that can be set in the panel input.
stepnumberno1Amount to increment by when using , , or dragging the panel input.
suffixstringno''Decorative text appended to the end of the panel input.

AnchorProvided value

The Number control provides a number value to your component—or undefined if there's no value set. Use defaultValue if you never want your component to receive undefined.


type LabelOrientation = 'vertical' | 'horizontal'