Usage
Here are different types of inputs.
<wc-number-field label="Number"></wc-number-field>
<wc-number-field label="Number" stepper="true"></wc-number-field>
Slots
Fancy larger or smaller input? Add size attribute for additional sizes.
<wc-number-field size="sm" label="Slots">
<wc-icon slot="start" name="currency_rupee"></wc-icon>
<wc-link slot="end" href="#">
<wc-icon name="link" size="sm"></wc-icon>
</wc-link>
</wc-number-field>
States
Make input look inactive by adding the disabled boolean attribute to any
<button> element.
<wc-number-field disabled="true" value="100"></wc-number-field>
<wc-number-field readonly="true" value="100"></wc-number-field>
Events
On input change a CustomEvent pc-input--change is triggered by
the element.
<wc-number-field variant="default" id="name-input-field" placeholder="Type here"></wc-number-field>
<script>
document.querySelector('#name-input-field').addEventListener('input', function(event) {
myConsole.log('pc-input--input :: ' + event.target.value);
});
document.querySelector('#name-input-field').addEventListener('change', function(event) {
myConsole.warn('pc-input--change :: ' + event.target.value);
});
</script>
On this page