Number input lets users enter a numeric value and incrementally increase or decrease the value with a two-segment control.
Usage
Here are different types of inputs.
<goat-number clearable="true" label="Number"></goat-number>
Slots
Fancy larger or smaller input? Add size attribute for additional sizes.
<goat-number size="sm" label="Slots">
<div slot="start">
<goat-icon slot="start" name="currency--dollar" size="1rem"></goat-icon>
</div>
<goat-link slot="end" href="#">
<goat-icon name="launch" size="sm"></goat-icon>
</goat-link>
</goat-number>
States
Disabled
Make input look inactive by adding the disabled boolean attribute to any
<button> element.
<goat-number disabled value="100"></goat-number>
Read only
<goat-number readonly value="100"></goat-number>
Events
On input change a CustomEvent goat-input--change is triggered by
the element.
document.querySelector('#number-input-field')
.addEventListener('goat-input--input', function (event) {
myConsole.log('goat-input--input :: ' + event.details);
});
document.querySelector('#number-input-field').addEventListener('goat-input--change', function (event) {
myConsole.warn('goat-input--change :: ' + event.target.value);
});