Number Field

<ef-panel spacing>
  <div>Pound Sterling (&#xA3;)</div>
  <ef-number-field value="1000" step="1" min="1" id="curr1"></ef-number-field>
  <div class="label">Conversion Rate</div>
  <ef-number-field value="38.62" min="0" step="0.01" id="cf"></ef-number-field>
  <div class="label">Thai Baht (&#xE3F;)</div>
  <ef-number-field readonly value="12000" no-spinner id="out"></ef-number-field>
</ef-panel>

var curr1 = document.getElementById('curr1');
var cf = document.getElementById('cf');
var out = document.getElementById('out');

out.value = (curr1.value * cf.value).toFixed(2);
curr1.addEventListener('value-changed', function() { out.value = (curr1.value * cf.value).toFixed(2); });
cf.addEventListener('value-changed', function() { out.value = (curr1.value * cf.value).toFixed(2); });

.label:not(:first-child) {
  margin-top: 8px;
}

.label {
  margin-bottom: 4px;
}

ef-number-field {
  max-width: 160px;
  text-align: right;
}

ef-number-field is a form control element for numerical values.

Basic usage

Number field can be used in a similar fashion to the native number input.

<ef-number-field value="1000"></ef-number-field>

Getting value

Just like the HTML native input, the number field input value is a string which can be accessed via the value property.

<ef-number-field id="number-input" value="3"></ef-number-field>

var numberInput = document.getElementById('number-input');
numberInput.value; // "3"

You can listen for the value-changed event that is triggered whenever the value changes due to user interactions.

<ef-number-field id="event" placeholder="Use spinner or type number to change value."></ef-number-field>
<p>Value: <code id="value-text"></code></p>

var element = document.getElementById('event');
var valueChangedText = document.getElementById('value-text');

element.addEventListener('value-changed', function(e) {
  valueChangedText.innerHTML = e.detail.value;
});

<ef-number-field id="event"></ef-number-field>
<p>Value: <code id="value-text"></code></p>

var element = document.getElementById('event');
var valueChangedText = document.getElementById('value-text');

element.addEventListener('value-changed', function (e) {
  valueChangedText.innerHTML = e.detail.value;
});

Input validation

To validate input from users ef-number-field provides similar features to a native input. When a user assigns an invalid input to the control, it will automatically apply an error style to alert the user.

Validation of user input of ef-number-field is consistent with a native input. See native input.

Set min or max value

Minimum and maximum values can be set to limit input values when the user interacts. If a value exceeds the min or max set programmatically, the component will change to dipslay an error state.

<ef-number-field placeholder="Min/Max" min="-12" max="16" id="mm"></ef-number-field>

document.getElementById('mm').value = '-15';

<ef-number-field min="-12" max="16"></ef-number-field>

Step

The step attribute specifies the interval between valid numbers. For instance, when step="2", valid values Would only be even numbers e.g. 2,4,6,8....

<ef-number-field placeholder="Even numbers only" step="2"></ef-number-field>

<ef-number-field step="2"></ef-number-field>

Whenever input is invalid, the error attribute will be added to the element. You can use the error property to check if input is currently in the error state.

<ef-number-field id="number-input" value="3" max="2"></ef-number-field>

var numberInput = document.getElementById('number-input');
numberInput.error; // "true"

You can add the event listener error-changed to the element and it will dispatch whenever the error state changes.

<ef-number-field id="input" min="0" max="10"></ef-number-field>
<p>Error: <code id="error-text"></code></p>

var element = document.getElementById('input');
var errorChangedText = document.getElementById('error-text');
element.value = "-1"

element.addEventListener('error-changed', function(e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = "Value must be between 0 - 10.";
  } else {
    errorChangedText.innerHTML = "";
  }
});

<ef-number-field id="input" min="0" max="10"></ef-number-field>
<p>Error: <code id="error-text"></code></p>

var element = document.getElementById('input');
var errorChangedText = document.getElementById('error-text');
element.value = '-1';

element.addEventListener('error-changed', function (e) {
  if (e.detail.value) {
    errorChangedText.innerHTML = 'Value must be between 0 - 10.';
  } else {
    errorChangedText.innerHTML = '';
  }
});