`Number`

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

AnchorExamples

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.

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 }),
  },
})

AnchorAPI

AnchorParameters

Parameter	Type	Required	Default	Description
`label`	`string`	no	`'Number'`	Text for the panel label.
`labelOrientation`	`LabelOrientation`	no	`'horizontal'`	Position of the panel label.
`defaultValue`	`number`	no	`undefined`	Will be used when the value isn't set.
`min`	`number`	no	`0`	The smallest number that can be set in the panel input.
`max`	`number`	no	`Infinity`	The largest number that can be set in the panel input.
`step`	`number`	no	`1`	Amount to increment by when using `↑`, `↓`, or dragging the panel input.
`suffix`	`string`	no	`''`	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.

AnchorTypes

type LabelOrientation = 'vertical' | 'horizontal'