Constructor
JavaScript:
-
new Coral.NumberInput()
ordocument.createElement('coral-numberinput')
HTML Tag:
-
<coral-numberinput>
Extends
Instance Properties
-
instance.disabled {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- disabled
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.invalid {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- invalid
-
instance.labelledBy {String}
-
- Inherited From:
- Default Value:
- null
- HTML Attribute:
- labelledby
-
instance.max {Number}
Reflected -
- Default Value:
- null
- HTML Attribute:
- max
-
instance.min {Number}
Reflected -
- Default Value:
- null
- HTML Attribute:
- min
-
instance.name {String}
Reflected -
- Inherited From:
- Default Value:
- ""
- HTML Attribute:
- name
-
instance.placeholder {String}
Reflected -
- Default Value:
- ""
- HTML Attribute:
- placeholder
-
instance.readOnly {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- readonly
-
instance.required {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- required
-
instance.step {Number | String}
Reflected -
- Default Value:
- 1
- HTML Attribute:
- step
-
instance.value {String}
-
- Inherited From:
- Default Value:
- ""
- HTML Attribute:
- value
-
instance.valueAsNumber {Number}
-
- Default Value:
- NaN
Whether this field is disabled or not.
Whether this component is hidden or not.
Whether the current value of this field is invalid or not.
Reference to a space delimited set of ids for the HTML elements that provide a label for the formField.
Implementers should override this method to ensure that the appropriate descendant elements are labelled using the
aria-labelledby
attribute. This will ensure that the component is properly identified for
accessibility purposes. It reflects the aria-labelledby
attribute to the DOM.
The maximum value for the NumberInput. If a value above the maximum is set, the NumberInput will be marked as
invalid but the value will be preserved. Stepping up the NumberInput via Coral.NumberInput#stepUp or
the increment button respects the maximum value. It reflects the
max
attribute to the DOM.
The minimum value for the NumberInput. If a value below the minimum is set, the NumberInput will be marked as
invalid but the value will be preserved. Stepping down the NumberInput via Coral.NumberInput#stepDown
or the decrement button respects the minimum value. It reflects the
min
attribute to the DOM.
Name used to submit the data in a form.
Short hint that describes the expected value of the NumberInput. It is displayed when the NumberInput is empty.
Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.
This is ignored for checkbox, radio or fileupload.
Whether this field is required or not.
The amount to increment by when stepping up or down. It can be the string
any
or any positive
floating point number. If this is not set to any, the control accepts only values at multiples of
the step value greater than the minimum.
This field's current value.
The value returned as a Number. Value is NaN
if conversion to Number is not possible.
Methods
-
instance.get
Get the value of a property.
-
- Parameters:
-
Name
Type
Description
property
String
The name of the property to fetch the value of.
- Returns:
-
Property value.
{*}
- Inherited From:
-
instance.hide
Hide this component.
-
- Returns:
-
this, chainable
{Coral.Component}
- Inherited From:
-
instance.off
Remove an event listener.
-
- Parameters:
-
Name
Type
Optional
Description
eventName
String
No
The event name to stop listening for.
selector
String
Yes
The selector that was used for event delegation.
func
function
No
The function that was passed to on()
.
useCapture
Boolean
Yes
Only remove listeners with useCapture
set to the value passed in.
- Returns:
-
this, chainable.
{Coral.Component}
- Inherited From:
-
instance.on
Add an event listener.
-
- Parameters:
-
Name
Type
Optional
Default
Description
eventName
String
No
The event name to listen for.
selector
String
Yes
The selector to use for event delegation.
func
function
No
The function that will be called when the event is triggered.
useCapture
Boolean
Yes
Whether or not to listen during the capturing or bubbling phase.
- Returns:
-
this, chainable.
{Coral.Component}
- Inherited From:
-
instance.remove
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
-
- Inherited From:
-
instance.set
Set a single property.
-
- Parameters:
-
Name
Type
Description
property
String
The name of the property to set.
value
*
The value to set the property to.
silent
Boolean
If true, events should not be triggered as a result of this set.
- Returns:
-
this, chainable.
{Coral.Component}
- Inherited From:
-
instance.show
Show this component.
-
- Returns:
-
this, chainable
{Coral.Component}
- Inherited From:
-
instance.stepDown
Decrements the value by step
. If the current value is null
or ''
, it is
considered as 0. The new value will always respect the min
and max
values if available.
-
-
instance.stepUp
Increments the value by step
. If the current value is null
or ''
, it is
considered as 0. The new value will always respect the min
and max
values if available.
-
-
instance.trigger
Trigger an event.
-
- Parameters:
-
Name
Type
Optional
Default
Description
eventName
String
No
The event name to trigger.
props
Object
Yes
Additional properties to make available to handlers as event.detail
.
bubbles
Boolean
Yes
Set to false
to prevent the event from bubbling.
cancelable
Boolean
Yes
Set to false
to prevent the event from being cancelable.
- Returns:
-
CustomEvent object
{CustomEvent}
- Inherited From:
Events
-
change
Triggered when the value has changed. This event is only triggered by user interaction.
-
- Callback Parameters:
-
Name
Type
Description
event
Object
Event object.
- Inherited From:
-
coral-component:attached
Triggered when the component is attached to the DOM.
-
- Callback Parameters:
-
Name
Type
Description
event
Object
Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
-
coral-component:detached
Triggered when the component is detached to the DOM.
-
- Callback Parameters:
-
Name
Type
Description
event
Object
Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
-
coral-component:ready
Triggerred when the component has been upgraded and is ready for use.
-
- Callback Parameters:
-
Name
Type
Description
event
Object
Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.