Skip to content
Buttonize.io Logo Buttonize.io Logo Buttonize Docs

Input.number

Number input field.

Input.number(props)

Usage

lib/MyStack.ts
4 collapsed lines
import { ButtonizeApp, Display, Input } from 'buttonize/cdk'


new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Input.number({


        id: 'year',
        label: 'What is your year of birth?',
        initialValue: 1990,
        min: 1900,
        max: 2024
      }),


      Display.text('In 2024 you are {{`2024` - year}} years old.')
    ]
  })

Preview

app.buttonize.io

Runtime State

The value in the runtime state is the number value of the input.

lib/MyStack.ts
Input.number({
  id: 'age',
  label: 'What is your age?',
  initialValue: 18
  min: 0
}),
Runtime state
{
  "age": 18
}

As demonstrated by the Usage example above, you can access variables from the Runtime State via the "{{age}}" syntax from elsewhere in your Buttonize app.

Props

id

Required

string

Key used for storing value of the number input in the Runtime State.

label

Optional

string
Text above the input element.

placeholder

Optional

string | number
Placeholder of the input element.

initialValue

Optional

number

The initial value for the input set in the Runtime State.

disabled

Optional

boolean

Whether or not the input is disabled. Default is false.

min

Optional

number

Min value for the input. After clicking outside of the input field, validation is performed and if the input value is lower than min (if specified) the input value is set to min.

max

Optional

number

Max value for the input. After clicking outside of the input field, validation is performed and if the input value is higher than max (if specified) the input value is set to max.

step

Optional

number

Interval between legal numbers in the input field.

After clicking outside of the input field, validation is performed and if the input value is not a multiple of step (if specified) the input value is rounded to the nearest step.

Example: if step = 3, legal numbers could be -3, 0, 3, 6, etc.

allowEmpty

Optional

number

Allow null value to be stored in the Runtime State when the input field is empty.

This can happen when user removes all the numbers from the input.

After clicking outside of the input field, validation is performed and if allowEmpty is set to false and the input value is empty (null) the input value is set to min value (if specified) or 0, or max value, depending which one is lower.

Default is true.

spacingTop

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give above the component.

spacingBottom

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give below the component.

width

Optional

1 | 2 | 3 | 4
The width of the component.