Reference Source
import {NumberInput} from '@adobe/coral-spectrum'
public class | source

NumberInput

Expression Extends:

class NumberInput extends BaseFormField(BaseComponent(HTMLElement))

A NumberInput component is a numeric control form field. It 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.

See:

Example:

Markup
<coral-numberinput></coral-numberinput>
JS constructor
new Coral.NumberInput();

Member Summary

Public Members
public

Whether this field is disabled or not.

public

invalid: *

Inherited from BaseFormField#invalid.

public

Inherited from BaseFormField#labelledBy.

public

The maximum value for the NumberInput.

public

The minimum value for the NumberInput.

public

Name used to submit the data in a form.

public

Short hint that describes the expected value of the NumberInput.

public

Whether this field is readOnly or not.

public

Whether this field is required or not.

public

The amount to increment by when stepping up or down.

public

This field's current value.

  • "" by default.

public

The value returned as a Number.

Method Summary

Public Methods
public

clear()

public

reset()

public

Decrements the value by step.

public

stepUp()

Increments the value by step.

Public Members

public disabled: Boolean source

Whether this field is disabled or not.

  • false by default.
  • reflected

public invalid: * source

Inherited from BaseFormField#invalid.

public labelledBy: * source

Inherited from BaseFormField#labelledBy.

public max: Number source

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.

  • null by default.
  • reflected

public min: Number source

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.

  • null by default.
  • reflected

public name: String source

Name used to submit the data in a form.

  • "" by default.
  • reflected

public placeholder: String source

Short hint that describes the expected value of the NumberInput. It is displayed when the NumberInput is empty.

  • "" by default.
  • reflected

public readOnly: Boolean source

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.

  • false by default.
  • reflected

public required: Boolean source

Whether this field is required or not.

  • false by default.
  • reflected

public step: Number | String source

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.

  • 1 by default.
  • reflected

public value: String source

This field's current value.

  • "" by default.

public valueAsNumber: Number source

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

  • NaN by default.

Public Methods

public clear() source

public reset() source

public stepDown() source

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.

public stepUp() source

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.