enact logoEnact
Edit on GitHub

moonstone/EditableIntegerPicker

Moonstone styled editable integer picker.

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

Members

EditableIntegerPickerComponent

A component that lets the user select a number from a range of numbers.

By default, EditableIntegerPicker 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 EditableIntegerPicker from '@enact/moonstone/EditableIntegerPicker';

EditableIntegerPickerBaseComponent

A picker component that lets the user select a number in between min and max numbers.

This component is not spottable. Developers are encouraged to use moonstone/EditableIntegerPicker.EditableIntegerPicker.

import {EditableIntegerPickerBase} from '@enact/moonstone/EditableIntegerPicker';
Properties
max •
Number

The maximum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by step.

min •
Number

The minimum value selectable by the picker (inclusive).

The range between min and max should be evenly divisible by step.

aria-valuetext
String

The value for the picker for accessibility read out.

By default, aria-valuetext is set to the current selected child value.

decrementIcon
String

The icon for the decrementer.

All strings supported by Icon are supported. Without a custom icon, the default is used.

disabled
Boolean

Disables the picker and prevents events from firing.

editMode
Boolean

Displays the input field instead of the picker components.

incrementIcon
String

The icon for the incrementer.

All strings supported by Icon are supported. Without a custom icon, the default is used.

onInputBlur
Function

Called when there the input is blurred.

onPickerItemClick
Function

Called when the pickerItem is clicked and editMode is false.

In response, the editMode should be switched to true to enable editing. This is automatically handled by moonstone/EditableIntegerPicker.EditableIntegerPicker.

orientation
'horizontal''vertical'

The orientation of the picker.

Default: 'horizontal'
padded
Boolean

Pads the display value with zeros.

The number of zeros used is the number of digits of the value of min or max, whichever is greater.

step
Number

Allow the picker to only increment or decrement by a given value.

For example, a step of 2 would cause a picker to increment from 10 to 12 to 14, etc. It must evenly divide into the range designated by min and max.

Default: 1
unit
String

Unit label to be appended to the value for display.

Default: ''
value
Number

The current value of the Picker.

Default: 0
width
Number'small''medium''large'

The size of the picker.

'small', 'medium', 'large', or set to null to assume auto-sizing. 'small' is good for numeric pickers, 'medium' for single or short word pickers, 'large' for maximum-sized pickers.

You may also supply a number which will determine the minumum size of the Picker. Setting a number to less than the number of characters in your longest value may produce unexpected results.

Default: 'medium'
wrap
Boolean

Allows the picker to increment from the max to min value and vice versa.

ArrayBooleanFunctionModuleNumberObjectString