Coral.NumberInput

Current Version: 3.4.7
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Github: @coralui/coralui-component-numberinput

NumberInput is a touch-friendly numeric input control.

Forms

Vertical Layout

Show Markup 
<form class="coral-Form coral-Form--vertical u-columnMedium">
  <section class="coral-Form-fieldset">
    <div class="coral-Form-fieldwrapper">
      <label id="label-vertical-0" class="coral-Form-fieldlabel">Label</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-vertical-0"></coral-numberinput>
    </div>
  
    <div class="coral-Form-fieldwrapper">
      <label id="label-vertical-1" class="coral-Form-fieldlabel">Required</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-vertical-1" required></coral-numberinput>
      <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-vertical-numberinput-fieldinfo"></coral-icon>
      <coral-tooltip variant="info" placement="right" target="#coral-form-vertical-numberinput-fieldinfo">Required Information</coral-tooltip>
    </div>
  
    <div class="coral-Form-fieldwrapper">
      <label id="label-vertical-2" class="coral-Form-fieldlabel">Invalid</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-vertical-2" invalid></coral-numberinput>
      <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-vertical-numberinput-fielderror"></coral-icon>
      <coral-tooltip variant="error" placement="right" target="#coral-form-vertical-numberinput-fielderror">Error Message</coral-tooltip>
    </div>
  </section>
</form>

Aligned Layout

Show Markup 
<form class="coral-Form coral-Form--aligned u-columnLarge">
  <section class="coral-Form-fieldset">
    <div class="coral-Form-fieldwrapper">
      <label id="label-aligned-0" class="coral-Form-fieldlabel">Label</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-aligned-0"></coral-numberinput>
    </div>
  
    <div class="coral-Form-fieldwrapper">
      <label id="label-aligned-1" class="coral-Form-fieldlabel">Required</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-aligned-1" required></coral-numberinput>
      <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-aligned-numberinput-fieldinfo"></coral-icon>
      <coral-tooltip variant="info" placement="right" target="#coral-form-aligned-numberinput-fieldinfo">Required Information</coral-tooltip>
    </div>
  
    <div class="coral-Form-fieldwrapper">
      <label id="label-aligned-2" class="coral-Form-fieldlabel">Invalid</label>
      <coral-numberinput class="coral-Form-field" placeholder="Choose a number" name="name" labelledby="label-aligned-2" invalid></coral-numberinput>
      <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-aligned-numberinput-fielderror"></coral-icon>
      <coral-tooltip variant="error" placement="right" target="#coral-form-aligned-numberinput-fielderror">Error Message</coral-tooltip>
    </div>
  </section>
</form>

Accessibility

Keyboard support

The NumberInput component follows the ARIA specification for spinbutton. This means the following keys are valid for interacting with it: up, down, left, right, pageup, pagedown, home, end and the Mouse Wheel. Go ahead and try them on any component of the page!

Labelling the component

For improved accessibility the component should always be labelled. This can be achieved by using the labelledby attribute.
Show Markup 
<form class="coral-Form coral-Form--vertical">
  <section class="coral-Form-fieldset">
    <label class="coral-Form-fieldlabel" id="labelExample">Select the image width</label>
    <coral-numberinput value="480" name="ally" labelledby="labelExample"></coral-numberinput>
  </section>
</form>

Coral.NumberInput API

Constructor

JavaScript:

new Coral.NumberInput() or document.createElement('coral-numberinput')

HTML Tag:

<coral-numberinput>

Extends

Instance Properties

instance.disabled {Boolean}

Reflected
Whether this field is disabled or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • disabled

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.invalid {Boolean}

Reflected
Whether the current value of this field is invalid or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • invalid

instance.labelledBy {String}

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.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

instance.max {Number}

Reflected
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.
Default Value:
  • null
HTML Attribute:
  • max

instance.min {Number}

Reflected
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.
Default Value:
  • null
HTML Attribute:
  • min

instance.name {String}

Reflected
Name used to submit the data in a form.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • name

instance.placeholder {String}

Reflected
Short hint that describes the expected value of the NumberInput. It is displayed when the NumberInput is empty.
Default Value:
  • ""
HTML Attribute:
  • placeholder

instance.readOnly {Boolean}

Reflected
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.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • readonly

instance.required {Boolean}

Reflected
Whether this field is required or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • required

instance.step {Number | String}

Reflected
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.
Default Value:
  • 1
HTML Attribute:
  • step

instance.value {String}

This field's current value.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • value

instance.valueAsNumber {Number}

The value returned as a Number. Value is NaN if conversion to Number is not possible.
Default Value:
  • NaN

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.