Input

Properties (All)

Property	Type	Description
type	Input Search TextArea	The type of the input
defaultValue	string	The initial input content
addonAfter	string	Label displayed after the input field
addonBefore	string	Label displayed before the input field
allowClear	boolean	Adds a button to clear input field
bordered	boolean	Weather the input has a border
disabled	boolean	Weather the input is disabled
maxLength	number	Max allowed input length
prefix	table	See Prefix
suffix	table	See Suffix
showCount	boolean	When true, input count will be displayed
status	error, warning	Outline color of the input, used for error and warning
size	large middle small number	Size of the input
onChange	function(event)	Fired when user changes input textfield
onPressEnter	function(event)	Fired when user presses enter while focused on input

Properties (Text Area)

Property	Type	Description
-	-	ALL FROM All also work here!
autoSize	number	table

Properties (Search)

Property	Type	Description
-	-	ALL FROM All also work here!
enterButton	table	See EnterButton
loading	boolean	Weather the input is loading
onSearch	function(value, event, source)	Fired when the button is clicked

See more properties here.

Children

Input does not support children.

Example

local input = AM:createElement("Input", {
    placeholder = "Input Here...",
    width = "175px",
    type = "search",
    -- Fired when user changes input textfield
    onChange = function(id, name, event)
        local value = event.target.value
        print("Value Changed To: " .. value)
        --print("On Change Event: ", json.encode(event, {indent = true}))
    end,
    -- Fired when user presses enter on the keybaord.
    onPressEnter = function(id, name, event)
        local value = event.target.value
        print("Presssed Enter. Value: " .. value)
    end,
    -- Fired when type="search" and the right-side button is pressd.
    onSearch = function(id, name, value, event, source)
        print("Search Button Pressed. Value: " .. value)
        --print("onSearch: ", value, json.encode(event, {indent = true}), json.encode(source))
    end,
})

Looks like:

type

The type of input. Can be Input, Search or TextArea.

defaultValue

The default value in the input text area.

defaultValue = "Start Value"

addonAfter

Text displayed after the input textfield.

addonAfter = ".com"

In this example I have changed the type of the input field to default which is Input

addonBefore

Text displayed before the input textfield.

addonBefore = "http://"

Same as addonAfter, I've changed the type to Input.

allowClear

When true a clear button is displayed to clear the textfield.

bordered

When false the outline and background is removed.

disabled

When true the input is disabled, not allowing the user to use it.

maxLength

Sets the max allowed length of the text user can write.

maxLength = 10

Will only allow the user to write 10 characters

prefix

Text or Icon displayed before input field.

As usual icons can be found here.

Example

-- Icon display
prefix = {
    type = "icon",
    value = "FileSearchOutlined",
}

How icon prefix looks:

-- Text display
prefix = {
    type = "text",
    value = "PREFIX",
}

How text prefix looks:

suffix

Suffix works just like prefix, but a suffix is after the input.

As usual icons can be found here.

Example

-- Icon display
suffix = {
    type = "icon",
    value = "FileSearchOutlined",
}

How icon suffix looks:

-- Text display
suffix = {
    type = "text",
    value = "SUFFIX",
}

How text suffix looks:

showCount

When true a number will be displayed depending on the type of input.

The count will increment with each character in the input

status

Can be either error or warning. Changes the outline color.

size

Can be small, middle, large or any number.

When its a number, its treated as pixels.

onChange

Event is fired when user changes the input.

onPressEnter

Event is fired when the user presses enter while the input is focused.

onPressEnter = function(id, name, event)
    local value = event.target.value
    print("Presssed Enter. Value: " .. value)
    --local ctrlKey = event.ctrlKey
    --local shiftKey = event.shiftKey
    --local altKey = event.altKey
    --local key = event.key
end

You can also get more usefull information like weather the user is holding CTRL while pressing enter.

autoSize (TextArea only)

When true and type == "TextArea" the text area will size depending on the length of the users input.

Can also be a table like:

autoSize = {
    minRows = 2,
    maxRows = 6,
}

This will size the text are after the input.

enterButton (Search only)

Works like prefix and suffix, this just changes the "search" button of the search input.

enterButton = {
    type = "text",
    value = "TEXT",
}

enterButton = {
    type = "icon",
    value = "SearchOutlined",
}

loading (Search only)

When true the "search" button displays a loading icon, and prevets the user from clicking it.

Like so:

onSearch (Search only)

Event is fired when the user presses the button when type == "Search".

onSearch = function(id, name, value, event, source)
    print("Search Button Pressed. Value: " .. value)
    --local ctrlKey = event.ctrlKey
    --local shiftKey = event.shiftKey
    --local altKey = event.altKey
    --print("onSearch: ", value, json.encode(event, {indent = true}), json.encode(source))
end,

You can get usefull information like weather the user is holding CTRL, like shown above.