Input.password

AWS CDK

Source

Simple password input field.

Input.password(props)

Usage

lib/MyStack.ts

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

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

        id: 'pwd',
        label: 'Password',
        placeholder: 'Make sure the password is strong'
      })

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

Preview

app.buttonize.io

Runtime State

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

lib/MyStack.ts

Input.password({
  id: 'pwd',
  label: 'User password'
})

Runtime state

{
  "pwd": "super-secret-password"
}

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

Props

id

Required

string

Key used for storing value of the password 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.