Time

Under Review Available since 1.1.0

The time component is used to select a time value.

Multiple instances can be used in the time-picker to choose hours, minutes, seconds and period of the day. It will be rare to see this component used alone.


With Values

<div class="fd-time">
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase hours" aria-controls="1610C873"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="hh" value="02"
          id="1610C873" aria-label="Hours"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease hours" aria-controls="1610C873"></button>
      </div>
  </div>

  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase minutes" aria-controls="DDlHR199"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="mm" value="34" id="DDlHR199"
          aria-label="Minutes"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease minutes" aria-controls="DDlHR199"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase seconds" aria-controls="8CAnL947"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="ss" value="56" id="8CAnL947"
          aria-label="Seconds"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease seconds" aria-controls="8CAnL947"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase period" aria-controls="sEWOL676"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="am" value="pm" id="sEWOL676"
          aria-label="Period"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease period" aria-controls="sEWOL676"></button>
      </div>
  </div>
</div>

With Placeholder

<div class="fd-time">
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase hours" aria-controls="HgDLk176"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="hh" value="" id="HgDLk176"
          aria-label="Hours"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease hours" aria-controls="HgDLk176"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase minutes" aria-controls="CHeFH472"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="mm" value="" id="CHeFH472"
          aria-label="Minutes"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease minutes" aria-controls="CHeFH472"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase seconds" aria-controls="qMPpb855"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="ss" value="" id="qMPpb855"
          aria-label="Seconds"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease seconds" aria-controls="qMPpb855"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase period" aria-controls="VpUG6928"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="am" value="" id="VpUG6928"
          aria-label="Period"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease period" aria-controls="VpUG6928"></button>
      </div>
  </div>
</div>

With Button State

Since the controls and inputs are standard components, they can take all states available to buttons and forms respectively, e.g., disabled, .is-invalid. In this case, the buttons are disabled when the first or last values are reached.

<div class="fd-time">
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow"
          aria-label="Increase hours" aria-controls="Rjap5115"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="hh" value="00" id="Rjap5115"
          aria-label="Hours"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow is-disabled"
          aria-label="Decrease hours" aria-controls="Rjap5115"></button>
      </div>
  </div>
  <div class="fd-time__item">
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-up-arrow is-disabled"
          aria-label="Increase minutes" aria-controls="VnVPz732"></button>
      </div>
      <div class="fd-time__input">
          <input class="fd-form__control" type="text" placeholder="mm" value="59" id="VnVPz732"
          aria-label="Minutes"/>
      </div>
      <div class="fd-time__control">
          <button class="fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
          aria-label="Decrease minutes" aria-controls="VnVPz732"></button>
      </div>
  </div>
</div>