Home Components Input
Input
Overview Playground API
Enables native inputs to be used within a Form field.
Usage Here are different types of inputs.



  

  

Slots Fancy larger or smaller input? Add size attribute for additional sizes.
@example.com


    
      
      
@example.com
Sizes Fancy larger or smaller input? Add size attribute for additional sizes.

  
  
  
States Disabled Make input look inactive by adding the disabled boolean attribute to any <button> element.
@example.com

  
    
    @example.com
  

Readonly Make input look inactive by adding the disabled boolean attribute to any <button> element.
@example.com

  
    
    @example.com
  
Status

  
  
  
Events On input change a CustomEvent goat:change is triggered by the element.

      document.querySelector('#name-input-field').addEventListener('goat:input', function (event) {
        myConsole.log('goat:input :: ' + event.target.value);
      });

      document.querySelector('#name-input-field').addEventListener('goat:change', function (event) {
        myConsole.warn('goat:change :: ' + event.target.value);
      });
    
Usage Slots Sizes States Events
Work in progress
Properties
Events