sandstone/Input

Popup style inputs for text and numbers.

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

Members

Input`Component`

Provides an input in the form of a popup.

Usage:

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

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

Extends: sandstone/Input.InputBase

InputBase`Component`

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

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

Properties

disabled: Disables the button that activates the input popup.
placeholder: Text displayed when value is not set.
Default: '-'
size: The size of the input field.
Default: 'small'
type: Type of the input.
Default: 'text'
value: Initial value of the input.
This value is used for setting the defaultValue of the InputField.
See: sandstone/Input.InputField

InputDecorator`Higher-Order Component`

Sandstone specific item behaviors to apply to Input.

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

Includes: ui/Toggleable.Toggleable

Includes: ui/Changeable.Changeable

Includes: sandstone/Skinnable.Skinnable

InputField`Component`

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';

Extends: sandstone/Input.InputFieldBase

Wrapped with: ui/Changeable.Changeable

Wrapped with: spotlight/Spottable.Spottable

Wrapped with: sandstone/Skinnable.Skinnable

Properties

autoFocus: 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: Sets the initial value.
disabled: Applies a disabled style and prevents interacting with the component.
Default: false
dismissOnEnter: Blurs the input when the "enter" key is pressed.
Default: false
onActivate: Called when the internal input is focused.
onDeactivate: Called when the internal input loses focus.
onSpotlightDisappear: Called when the component is removed when it had focus.
spotlightDisabled: Disables spotlight navigation into the component.
Default: false

InputFieldBase`Component`

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

announce: Passed by AnnounceDecorator for accessibility.
disabled: Disables InputField and becomes non-interactive.
Default: false
dismissOnEnter: Blurs the input when the "enter" key is pressed.
Default: false
iconAfter: The icon to be placed at the end of the input.
See: sandstone/Icon.Icon
iconBefore: The icon to be placed at the beginning of the input.
See: sandstone/Icon.Icon
invalid: Indicates value is invalid and shows invalidMessage, if set.
Default: false
invalidMessage: 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: Called before the input value is changed.
The change can be prevented by calling preventDefault on the event.
onBlur: Called when blurred.
onChange: 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: Called when clicked.
onFocus: Called when focused.
onKeyDown: Called when a key is pressed down.
placeholder: Text to display when value is not set.
Default: ''
size: The size of the input field.
Default: 'small'
type: The type of input.
Accepted values correspond to the standard HTML5 input types.
See: MDN input types doc
Default: 'text'
value: The value of the input.

InputFieldDecorator`Higher-Order Component`

Sandstone specific item behaviors to apply to InputField.

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

Includes: ui/Changeable.Changeable

Includes: sandstone/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"
/>

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

Extends: sandstone/Input.InputPopupBase

InputPopupBase`Component`

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

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

Properties

announce: Passed by AnnounceDecorator for accessibility.
backButtonAriaLabel: Sets the hint string read when focusing the back button.
Default: 'go to previous'
css: Customize component style
disabled: Disables the input popup.
inputFieldSpotlightId: Sets spotlightId to InputField.
invalid: Indicates value is invalid and shows invalidMessage, if set.
invalidMessage: 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: 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: The maximum length of number input fields.
Overridden by length value.
Default: 4
minLength: 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: Omits the back button.
noSubmitButton: Omits the submit button.
numberInputField: 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: Called before the input value is changed.
The change can be prevented by calling preventDefault on the event.
onChange: Called when the input value is changed.
onClose: Called when the popup is closed.
onComplete: Called when input is complete.
onOpenPopup: Called when the popup is opened.
open: Opens the popup.
placeholder: Text displayed when value is not set.
popupAriaLabel: The "aria-label" for the popup when opened.
popupType: Type of popup.
Default: 'fullscreen'
size: Size of the input field.
Default: 'small'
subtitle: Subtitle below the title of popup.
Default: ''
title: Title text of popup.
Default: ''
type: Type of the input.
Default: 'text'
value: Initial value of the input.
This value is used for setting the defaultValue of the InputField.
See: sandstone/Input.InputField

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString

sandstone/Input

Members

InputComponent

InputBaseComponent

Properties

InputDecoratorHigher-Order Component

InputFieldComponent

Properties

InputFieldBaseComponent

Properties

InputFieldDecoratorHigher-Order Component

InputPopupComponent

InputPopupBaseComponent

Properties

Input`Component`

InputBase`Component`

InputDecorator`Higher-Order Component`

InputField`Component`

InputFieldBase`Component`

InputFieldDecorator`Higher-Order Component`

InputPopup`Component`

InputPopupBase`Component`