Home Components Time Picker
Time Picker
Overview Playground API
Captures time input.
Usage Here are different types of inputs.

  <goat-time-picker label="Date" helper-text="Optional helper text"></goat-time-picker>
Sizes Fancy larger or smaller input? Add size attribute for additional sizes.

  <goat-time-picker size="lg"></goat-time-picker>
  <goat-time-picker size="md"></goat-time-picker>
  <goat-time-picker size="sm"></goat-time-picker>
Disabled Make input look inactive by adding the disabled boolean attribute to any <input> element.

  <goat-time-picker disabled></goat-time-picker>
Read only

  <goat-time-picker readonly></goat-time-picker>
Events On input change a CustomEvent goat:change is triggered by the element.
      function(event) {
        console.log('goat:input :: ' + event.target.value);

      document.querySelector('#time-field').addEventListener('goat:change', function(event) {
        console.warn('goat:change :: ' + event.target.value);
Usage Sizes Disabled Events
Work in progress
CSS Custom Properties
Previous Next