Input.toggle

AWS CDK

Source

Displays an interactable toggle button within a Buttonize page.

Input.toggle(props)

Usage

lib/MyStack.ts

import { ButtonizeApp, Input, Display } from 'buttonize/cdk'

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

        id: 'toggleSwitch',
        label: 'Enable Feature',
      }),
      Display.text("toggleSwitch's value: {{toggleSwitch}}"),
    ]
  })

Preview

app.buttonize.io

Runtime State

The value in the runtime state is the boolean value of the toggle input.

lib/MyStack.ts

Input.toggle({
  id: 'bool',
  label: 'My Checkbox'
})

Runtime state

{
  "bool": true
}

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

Props

id

Required

string

The name of the variable containing the selected option. This variable can then be referenced elsewhere in your Buttonize app.

label

Optional

string

The text displayed by the checkbox.

initialValue

Optional

boolean

The initial state of the checkbox. Default is false.

disabled

Optional

boolean

Whether or not the checkbox is disable. Default is false.

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.