Enact

moonstone/Input

import Input from '@enact/moonstone/Input';

Members

InputComponent

moonstone/Input.Input is a Spottable, Moonstone styled input component. It supports pre and post icons.

By default, Input maintains the state of its value property. Supply the defaultValue property to control its initial value. If you wish to directly control updates to the component, supply a value to value at creation time and update it in response to onChange events.

import Input from '@enact/moonstone/Input';

InputBaseComponent

moonstone/Input.InputBase is a Moonstone styled input component. It supports start and end icons. Note that this base component is not stateless as many other base components are. However, it does not support Spotlight. Apps will want to use moonstone/Input.Input.

import {InputBase} from '@enact/moonstone/Input';
Properties
disabled
Boolean

When true, applies a disabled style and the control becomes non-interactive.

Default: false
dismissOnEnter
Boolean

When true, blurs the input when the "enter" key is pressed.

Default: false
focused
Boolean

When true, adds a focused class to the input decorator

Default: false
iconAfter
String

The icon to be placed at the end of the input.

See: moonstone/Icon.Icon
iconBefore
String

The icon to be placed at the beginning of the input.

See: moonstone/Icon.Icon
invalid
Boolean

When true, input text color is changed to red and the message tooltip is shown if it exists.

Default: false
invalidMessage
String

The tooltip text to be displayed when the contents of the input are invalid. If this value is falsy, the tooltip will not be shown.

Default: ''
onBlur
Function

The handler to run when blurred.

onChange
Function

The handler to run when the input value is changed.

onClick
Function

The handler to run when clicked.

onFocus
Function

The handler to run when focused.

onKeyDown
Function

The handler to run when a key is pressed down.

placeholder
String

The placeholder text to display.

Default: ''
type
String

The type of input. Accepted values correspond to the standard HTML5 input types.

Default: 'text'
value
StringNumber

The value of the input.

ArrayBooleanFunctionModuleNumberObjectString