moonstone/ Input
Exports the moonstone/Input.Input and moonstone/Input.InputBase components.
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
When
true
, applies a disabled style and the control becomes non-interactive.Default: false- dismissOnEnter
When
true
, blurs the input when the "enter" key is pressed.Default: false- focused
When
true
, adds afocused
class to the input decoratorDefault: false- iconAfter
The icon to be placed at the end of the input.
See: moonstone/Icon.Icon- iconBefore
The icon to be placed at the beginning of the input.
See: moonstone/Icon.Icon- invalid
When
true
, input text color is changed to red and the message tooltip is shown if it exists.Default: false- invalidMessage
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
The handler to run when blurred.
- onChange
The handler to run when the input value is changed.
- onClick
The handler to run when clicked.
- onFocus
The handler to run when focused.
- onKeyDown
The handler to run when a key is pressed down.
- placeholder
The placeholder text to display.
Default: ''- type
The type of input. Accepted values correspond to the standard HTML5 input types.
Default: 'text'- value
The value of the input.