sandstone/Input

Popup style inputs for text and numbers.

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

Members

InputComponent

Provides an input in the form of a popup.

Usage:

<Input
  onComplete={this.handleInputComplete}
  placeholder="Placeholder"
  subtitle="TitleBelow"
  title="Title"
  value={this.state.inputText}
/>
import Input from '@enact/sandstone/Input';

InputBaseComponent

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

import {InputBase} from '@enact/sandstone/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'

Type of the input.

Default: 'text'
value
StringNumber

Value of the input.

InputDecoratorHigher-Order Component

Sandstone specific item behaviors to apply to Input.

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

InputFieldComponent

A Spottable, Sandstone 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 {InputField} from '@enact/sandstone/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

InputFieldBaseComponent

A Sandstone styled input component.

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

import {InputFieldBase} from '@enact/sandstone/Input';
Properties
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.

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 be shown with the default message.

Default: 'Please enter a valid value.'
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 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'
value
StringNumber

The value of the input.

InputFieldDecoratorHigher-Order Component

Sandstone specific item behaviors to apply to InputField.

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

InputPopupComponent

Provides an input popup without button.

Usage:

<InputPopup
  open={this.state.open}
  onComplete={this.handleInputPopupComplete}
  placeholder="Placeholder"
  subtitle="Subtitle"
  title="Title"
  value={this.state.inputText}
/>
import {InputPopup} from '@enact/sandstone/Input';

InputPopupBaseComponent

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

import {InputPopupBase} from '@enact/sandstone/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'
css
Object

Customize component style

disabled
Boolean

Disables the input popup.

invalid
Boolean

Indicates value is invalid and shows invalidMessage, if set.

invalidMessage
String

The tooltip text to be displayed when the input is 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.

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.

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 types.

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'

Type of the input.

Default: 'text'
value
StringNumber

Value of the input.

ArrayBooleanFunctionModuleNumberObjectString