# 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)
# 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