# oh-input - Input

Displays an input field, used to set a variable

# Configuration

# General

# name Name TEXT

Input name

# type Type TEXT

Type of input (see f7 input docs, date or datepicker)

# inputmode Input Mode TEXT

Type of data that might be entered (see MDN docs)

# placeholder Placeholder TEXT

Placeholder text

# sendButton Send button BOOLEAN

Display Send button to update the state with a command (needs a configured item)

# clearButton Clear button BOOLEAN

Display input clear button when applicable

# outline Outline BOOLEAN

Makes input outline

# required Required BOOLEAN

Display an error message if left empty

# validate Validate BOOLEAN

When enabled, input value will be validated based on input type

# validate-on-blur Validate on blur BOOLEAN

Only validate when focus moves away from input field

# item Item TEXT item

Link the input value to the state of this item

# useDisplayState Use Display State BOOLEAN

Use the formatted state as the value for the input control

# step Step DECIMAL

Step value when type set to number, any if left empty

# showTime Show time BOOLEAN

Display time when type set to datepicker

# defaultValue Default value TEXT

Default value when not found in item state or variable

# variable Variable TEXT

Name of the variable to set when the input changes

# variableKey Variable Key TEXT

Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.

# Examples

# Select with Options

component: oh-input
config:
  type: select
  style:
    margin-left: 15px
slots:
  default:
    - component: option
      config:
        value: foo
      slots:
        default:
          - component: Content
            config:
              text: foo
    - component: option
      config:
        value: bar
      slots:
        default:
          - component: Content
            config:
              text: bar