Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

When using date and time pickers, include appropriate helper text and validation, and check browser support.

On mobile, pickers are best suited for display in confirmation dialog.
For inline display, such as on a form, consider using compact controls such as segmented drop-down buttons.

Date Pickers

A native date picker example with type="date", it can be used as a calendar too.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="date-field">Birthday</label>
      <input id="date-field" type="date" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-date-field"><span>Birthday</span></label>
      </span>
      <input id="outlined-date-field" type="date" class="u-textfield u-textfield--outlined" />
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="date-field">Birthday</label>
      <input id="date-field" type="date" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-date-field"><span>Birthday</span></label>
      </span>
      <input id="outlined-date-field" type="date" class="u-textfield u-textfield--outlined" />
    </div>
  </div>
</form>

Date & Time Pickers

A native date & time picker example with type="datetime-local".

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="datetime-field">Next appointment</label>
      <input id="datetime-field" type="datetime-local" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-datetime-field"
          ><span>Next appointment</span></label
        >
      </span>
      <input
        id="outlined-datetime-field"
        type="datetime-local"
        class="u-textfield u-textfield--outlined"
      />
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="datetime-field">Next appointment</label>
      <input id="datetime-field" type="datetime-local" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-datetime-field"
          ><span>Next appointment</span></label
        >
      </span>
      <input
        id="outlined-datetime-field"
        type="datetime-local"
        class="u-textfield u-textfield--outlined"
      />
    </div>
  </div>
</form>

Time Pickers

A native time picker example with type="time".

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="time-field">Alarm clock</label>
      <input id="time-field" type="time" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-time-field"><span>Alarm clock</span></label>
      </span>
      <input id="outlined-time-field" type="time" class="u-textfield u-textfield--outlined" />
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="time-field">Alarm clock</label>
      <input id="time-field" type="time" class="u-textfield" />
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-time-field"><span>Alarm clock</span></label>
      </span>
      <input id="outlined-time-field" type="time" class="u-textfield u-textfield--outlined" />
    </div>
  </div>
</form>

Pickers

Date Pickers

Date & Time Pickers

Time Pickers

Properties

<TextField />

<FormControl />

<FormLabel />