limestone/Input

Popup style inputs for text and numbers.

Import Usage

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

Members

Input   Component

Provides an input in the form of a popup.

Usage:

<Input
  onComplete={this.handleInputComplete}
  placeholder="Placeholder"
  subtitle="TitleBelow"
  title="Title"
/>

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 Usage

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

Extends: limestone/Inputlimestone/Input.InputBase

InputBase   Component

Base component for providing text input in the form of a popup.

Import Usage

import {InputBase} from '@enact/limestone/Input';

Properties

disabled

Boolean

Disables the button that activates the input popup.

---

placeholder

String

Text displayed when value is not set.

Default: '-'

---

size

'large''small'

The size of the input field.

Default: 'small'

---

type

'text''password''number''passwordnumber''url''tel''passwordtel'

Type of the input.

Default: 'text'

---

value

StringNumber

The value of the input.

See: limestone/Inputlimestone/Input.InputField

InputDecorator   Higher-Order Component

Limestone specific item behaviors to apply to limestone/Inputlimestone/Input.InputBase.

Import Usage

import {InputDecorator} from '@enact/limestone/Input';

Includes: ui/Toggleableui/Toggleable.Toggleable
Includes: ui/Changeableui/Changeable.Changeable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

InputField   Component

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

By default, InputField 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 Usage

import {InputField} from '@enact/limestone/Input';

Extends: limestone/Inputlimestone/Input.InputFieldBase
Wrapped with: ui/Changeableui/Changeable.Changeable
Wrapped with: spotlight/Spottablespotlight/Spottable.Spottable
Wrapped with: limestone/Skinnablelimestone/Skinnable.Skinnable

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

---

disabled

Boolean

Applies a disabled style and prevents interacting with the component.

Default: false

---

defaultValue

String

Sets the initial value.

---

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

InputFieldBase   Component

A Limestone styled input component.

It supports start and end icons, but it does not support Spotlight. Apps should use limestone/Inputlimestone/Input.InputField.

Import Usage

import {InputFieldBase} from '@enact/limestone/Input';

Properties

announce

Function

Passed by AnnounceDecorator for accessibility.

---

caretToEndOnFocus

Boolean

Moves the caret to the end of the text when the input receives focus.

Default: false

---

disabled

Boolean

Disables InputField and becomes non-interactive.

Default: false

---

dismissOnEnter

Boolean

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

Default: false

---

iconAfter

String

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

See: limestone/Iconlimestone/Icon.Icon

---

iconBefore

String

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

See: limestone/Iconlimestone/Icon.Icon

---

invalid

Boolean

Indicates limestone/Inputlimestone/Input.InputFieldBase.value is invalid and shows limestone/Inputlimestone/Input.InputFieldBase.invalidMessage, if set.

Default: false

---

invalidMessage

String

The tooltip text to be displayed when the input is limestone/Inputlimestone/Input.InputFieldBase.invalid.

If this value is falsy, the tooltip will be shown with the default message.

Default: 'Please enter a valid value.'

---

marqueeContent

Boolean

Wraps the input's value/placeholder display in a marquee.

Default: false

---

onBeforeChange

Function

Called before the input value is changed.

The change can be prevented by calling preventDefault on the event.

---

onBlur

Function

Called when blurred.

---

onChange

Function

Called when the input value is changed.

The event payload includes the current value as well as a stopPropagation() method which may be called to stop the original onChange event from the <input> from bubbling.

---

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 limestone/Inputlimestone/Input.InputFieldBase.value is not set.

Default: ''

---

size

'large''small'

The size of the input field.

Default: 'small'

---

type

String

The type of input.

Accepted values correspond to the standard HTML5 input types.

Default: 'text'

See: MDN input types docMDN input types doc

---

value

StringNumber

The value of the input.

InputFieldDecorator   Higher-Order Component

Limestone specific item behaviors to apply to limestone/Inputlimestone/Input.InputFieldBase.

Import Usage

import {InputFieldDecorator} from '@enact/limestone/Input';

Includes: ui/Changeableui/Changeable.Changeable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

InputPopup   Component

Provides an input popup without button.

Usage:

<InputPopup
  open={this.state.open}
  onComplete={this.handleInputPopupComplete}
  placeholder="Placeholder"
  subtitle="Subtitle"
  title="Title"
/>

By default, InputPopup 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 Usage

import {InputPopup} from '@enact/limestone/Input';

Extends: limestone/Inputlimestone/Input.InputPopupBase

InputPopupBase   Component

Base component for providing text input in the form of a popup without button.

Import Usage

import {InputPopupBase} from '@enact/limestone/Input';

Properties

announce

Object

Passed by AnnounceDecorator for accessibility.

---

backButtonAriaLabel

String

Sets the hint string read when focusing the back button.

Default: 'go to previous'

---

buttons

ElementArray(Element)

Buttons to be included under the component.

Typically, up to 3 buttons are used.

---

css

Object

Customize component style

---

defaultValue

StringNumber

Initial value of the input.

This value is used for setting the defaultValue of the InputField.

See: limestone/Inputlimestone/Input.InputField

---

disabled

Boolean

Disables the input popup.

---

inputFieldSpotlightId

String

Sets spotlightId to InputField.

---

invalid

Boolean

Indicates the value is invalid and shows limestone/Inputlimestone/Input.InputPopupBase.invalidMessage, if set.

---

invalidMessage

String

The tooltip text to be displayed when the input is limestone/Inputlimestone/Input.InputPopupBase.invalid.

If this value is falsy, the tooltip will be shown with the default message.

Default: 'Please enter a valid value.'

---

length

Number

Set the length of number input field.

Sets the amount of numbers this field will collect. Any number between 1 and 6 (inclusive) will render individual number cells, greater than 6 will render a single box with numbers in it. This only has an effect on 'number' and 'passwordnumber' type and when numberInputField is 'auto'.

This value will override minLength and maxLength.

---

marqueeInputField

Boolean

Wraps the InputField's value display in a marquee.

Default: false

---

maxLength

Number

The maximum length of number input fields.

Overridden by length value.

Default: 4

---

minLength

Number

The minimum length of number input fields.

Overridden by length value.

When smaller than maxLength, number type inputs will show a submit button and will not auto-submit when the length reaches maxLength. Defaults to the maxLength value.

---

noBackButton

Boolean

Omits the back button.

---

noSubmitButton

Boolean

Omits the submit button.

---

numberInputField

'auto''separated''joined''field'

The type of numeric input to use.

The default is to display separated digits when length is less than 7. If field is set, a standard InputField will be used instead of the normal number input.

This has no effect on other limestone/Inputlimestone/Input.InputPopupBase.type.

Default: 'auto'

---

onBeforeChange

Function

Called before the input value is changed.

The change can be prevented by calling preventDefault on the event.

---

onChange

Function

Called when the input value is changed.

---

onClose

Function

Called when the popup is closed.

---

onComplete

Function

Called when input is complete.

---

onOpenPopup

Function

Called when the popup is opened.

---

open

Boolean

Opens the popup.

---

placeholder

String

Text displayed when value is not set.

---

popupAriaLabel

String

The "aria-label" for the popup when opened.

---

popupType

'fullscreen''overlay'

Type of popup.

Default: 'fullscreen'

---

size

'large''small'

Size of the input field.

Default: 'small'

---

subtitle

String

Subtitle below the title of popup.

Default: ''

---

title

String

Title text of popup.

Default: ''

---

type

'text''password''number''passwordnumber''url''tel''passwordtel'

Type of the input.

Default: 'text'