moonstone/Input

Moonstone styled input components.

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

Members

InputComponent

A Spottable, Moonstone styled input component with embedded icon support.

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';
Properties
autoFocus
Boolean

Focuses the internal input when the component gains 5-way focus.

By default, the internal input is not editable when the component is focused via 5-way and must be selected to become interactive. In pointer mode, the input will be editable when clicked.

Default: false
defaultValue
String

Sets the initial value.

disabled
Boolean

Applies a disabled style and prevents interacting with the component.

Default: false
dismissOnEnter
Boolean

Blurs the input when the "enter" key is pressed.

Default: false
onActivate
Function

Called when the internal input is focused.

onDeactivate
Function

Called when the internal input loses focus.

onSpotlightDisappear
Function

Called when the component is removed when it had focus.

spotlightDisabled
Boolean

Disables spotlight navigation into the component.

Default: false

InputBaseComponent

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

Disables Input and becomes non-interactive.

Default: false
dismissOnEnter
Boolean

Blurs the input when the "enter" key is pressed.

Default: false
focused
Boolean

Adds a focused class to the input decorator.

Default: false
iconAfter
String

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

iconBefore
String

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

invalid
Boolean

Indicates value is invalid and shows invalidMessage, if set.

Default: false
invalidMessage
String

The tooltip text to be displayed when the input is invalid.

If this value is falsy, the tooltip will not be shown.

Default: ''
onBlur
Function

Called when blurred.

onChange
Function

Called when the input value is changed.

onClick
Function

Called when clicked.

onFocus
Function

Called when focused.

onKeyDown
Function

Called when a key is pressed down.

placeholder
String

Text to display when value is not set.

Default: ''
small
Boolean

Applies the small CSS class.

Default: false
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