carbon-components
Version:
Carbon Components is a component library for IBM Cloud
146 lines (143 loc) • 6.76 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--form-item">
<div class="bx--time-picker">
<div class="bx--time-picker__input">
<label for="time-picker-1" class="bx--label">Select a time</label>
<input id="time-picker-1" type="text" class="bx--text-input bx--time-picker__input-field"
pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-1" class="bx--label bx--visually-hidden">Select AM/PM</label>
<select id="select-id-1" class="bx--select-input">
<option class="bx--select-option" value="AM">AM</option>
<option class="bx--select-option" value="PM">PM</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-2" class="bx--label bx--visually-hidden">Select time
zone</label>
<select id="select-id-2" class="bx--select-input">
<option class="bx--select-option" value="option-1">Time zone 1</option>
<option class="bx--select-option" value="option-2">Time zone 2</option>
<option class="bx--select-option" value="option-3">Time zone 3</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--time-picker" data-invalid>
<div class="bx--time-picker__input">
<label for="time-picker-2" class="bx--label">Select a time</label>
<input id="time-picker-2" type="text" class="bx--text-input bx--time-picker__input-field"
pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" />
<div class="bx--form-requirement">
Invalid time.
</div>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-3" class="bx--label bx--visually-hidden">Select AM/PM</label>
<select id="select-id-3" class="bx--select-input">
<option class="bx--select-option" value="AM">AM</option>
<option class="bx--select-option" value="PM">PM</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-4" class="bx--label bx--visually-hidden">Select time
zone</label>
<select id="select-id-4" class="bx--select-input">
<option class="bx--select-option" value="option-1">Time zone 1</option>
<option class="bx--select-option" value="option-2">Time zone 2</option>
<option class="bx--select-option" value="option-3">Time zone 3</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--time-picker">
<div class="bx--time-picker__input">
<label for="time-picker-3" class="bx--label bx--label--disabled">Select a time</label>
<input id="time-picker-3" type="text" class="bx--text-input bx--time-picker__input-field"
pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-5" class="bx--label bx--visually-hidden">Select AM/PM</label>
<select id="select-id-5" class="bx--select-input" disabled>
<option class="bx--select-option" value="AM">AM</option>
<option class="bx--select-option" value="PM">PM</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-6" class="bx--label bx--visually-hidden">Select time
zone</label>
<select id="select-id-6" class="bx--select-input" disabled>
<option class="bx--select-option" value="option-1">Time zone 1</option>
<option class="bx--select-option" value="option-2">Time zone 2</option>
<option class="bx--select-option" value="option-3">Time zone 3</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="bx--form-item">
<div class="bx--time-picker" data-invalid>
<div class="bx--time-picker__input">
<label for="time-picker-4" class="bx--label bx--label--disabled">Select a time</label>
<input id="time-picker-4" type="text" class="bx--text-input bx--time-picker__input-field"
pattern="(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)" placeholder="hh:mm" maxlength="5" disabled />
<div class="bx--form-requirement">
Invalid time.
</div>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-7" class="bx--label bx--visually-hidden">Select AM/PM</label>
<select id="select-id-7" class="bx--select-input" disabled>
<option class="bx--select-option" value="AM">AM</option>
<option class="bx--select-option" value="PM">PM</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
<div
class="bx--time-picker__select bx--select bx--select--inline">
<label for="select-id-8" class="bx--label bx--visually-hidden">Select time
zone</label>
<select id="select-id-8" class="bx--select-input" disabled>
<option class="bx--select-option" value="option-1">Time zone 1</option>
<option class="bx--select-option" value="option-2">Time zone 2</option>
<option class="bx--select-option" value="option-3">Time zone 3</option>
</select>
<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
</svg>
</div>
</div>
</div>