Input.text

AWS CDK

Source

Simple text input field.

Input.text(props)

Usage

lib/MyStack.ts

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

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

        id: 'name',
        label: 'What is your name?',
        placeholder: 'John Doe',
        initialValue: 'David Copperfield'
      }),

      Display.text("You entered: {{name}}")
    ]
  })

Preview

app.buttonize.io

Runtime State

The value in the runtime state is the string value of the text input.

lib/MyStack.ts

Input.text({
  id: 'name',
  label: 'What is your name?'
})

Runtime state

{
  "name": "David Copperfield"
}

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

Props

id

Required

string

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

label

Optional

string

Text above the input element.

placeholder

Optional

string

Placeholder of the input element.

initialValue

Optional

string

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

disabled

Optional

boolean

Whether or not the input is disabled. 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.