Input.select

Displays a dropdown field, allowing a user to select an option from a pre-defined list.

Input.select(props)

Usage

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

new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Input.select({
        id: 'selectInput',
        options: [
          { label: 'Option 1', value: 'option1' },
          { label: 'Option 2', value: 'option2' },
        ],
        label: 'Select an option',
        placeholder: 'Choose one...',
        initialValue: [
          { label: 'Option 1', value: 'option1' }
        ],
      }),

      Display.text("Selected label: {{selectInput.label}}"),
      Display.text("Selected value: {{selectInput.value}}")
    ]
  })

Preview

app.buttonize.io

Runtime State

The value in the runtime state is the selected object from the select input. You can use dot notation to access the desired property for either the label or the value.

Input.select({
  id: 'selectInput',
  options: [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' }
  ],
  label: 'Select an option'
})

// Assuming the first option is the selected value
{
  "selectInput": {
    "label": "Option 1",
    "value": "option1"
  }
}

// If the section option is the selected value, it would of course be
{
  "selectInput": {
    "label": "Option 2",
    "value": "option2"
  }
}

As demonstrated by the Usage example above, you can access variables from the Runtime State via the “{{selectInput.value}}” 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.

options

Required

{ label: string; value: string | number | boolean }[]

An array of options. Each option should have a label and value key set.

label

Optional

string

Text to display above the select input.

disabled

Optional

boolean

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

placeholder

Optional

string

Placeholder text for the select input.

multi

Optional

boolean

Enables multi-select functionality. Default is false.

initialValue

Optional

{ label: string; value: string | number | boolean }

Initial selected value or values for the select input. Use an array for multi-select.

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.