Home Components Number
Overview Playground API
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>
      <goat-link slot="end" href="#">
        <goat-icon name="launch" size="sm"></goat-icon>

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.
      .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);
Usage Slots States Events
Work in progress
CSS Custom Properties
Previous Next