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



  <goat-input type="text" required clearable="true" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></goat-input>

  <br>

  <goat-input type="password" label="Password" helper-text="Optional help text" placeholder="Optional placeholder text"></goat-input>

  <br>

  <goat-input type="text" skeleton="true" required clearable="true" label="Text input label" helper-text="" placeholder="Optional placeholder text"></goat-input>
Slots Fancy larger or smaller input? Add size attribute for additional sizes.
@example.com
 


    <goat-input label="Email" type="text" size="lg">
      <goat-icon slot="start" name="email"></goat-icon>
      <div slot="end">@example.com</div>
    </goat-input>

    <goat-input type="text" label="Card Number">
      <goat-icon slot="start" name="purchase"></goat-icon>
      <div slot="end"><goat-spinner></goat-spinner></div>
    </goat-input>
Sizes Fancy larger or smaller input? Add size attribute for additional sizes. 

  <goat-input size="lg" placeholder="Large"></goat-input>
  <goat-input placeholder="Medium"></goat-input>
  <goat-input size="sm" placeholder="Small"></goat-input>
States Disabled Make input look inactive by adding the disabled boolean attribute to any <button> element.
@example.com 

  <goat-input disabled>
    <goat-icon slot="start" class="inherit" name="email"></goat-icon>
    <span slot="end">@example.com</span>
  </goat-input>

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

  <goat-input readonly="">
    <goat-icon slot="start" class="inherit" name="email"></goat-icon>
    <span slot="end">@example.com</span>
  </goat-input>
Status 

  <goat-input label="City" invalid="true" invalid-text="Please provide a valid city" value="America"></goat-input>
  <goat-input label="City" warn="true" warn-text="Please provide a valid city" value="America"></goat-input>
  <goat-input label="City" success="true" value="America"></goat-input>
Events On input change a CustomEvent goat-input--change is triggered by the element. 

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

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