Skip to main content

Overview

Pickers enhance native browser inputs like <input type="color"> and <input type="date"> with uniform border styling, hex readout badges, integrated calendar icons, and dual date ranges.

Color Picker Wrapper

The .form-color-picker container couples a color swatch preview with an interactive hex readout badge:

<label class="form-color-picker" for="brandColor">
  <input type="color" class="form-control-color" id="brandColor" name="brandColor" value="#7c3aed">
  <span class="form-color-value">#7c3aed</span>
</label>

Date & Time Pickers

Use .form-picker-group with leading icons for date and time fields.

📅
⏰ 
<div class="form-picker-group">
  <span class="form-picker-icon">📅</span>
  <input type="date" class="form-control" id="pickerDate" name="appointmentDate">
</div>

Date Range Group

📅
to
📅 
<label class="form-label" for="rangeStartDate"><span>Booking Period</span></label>
<div class="form-date-range">
  <div class="form-picker-group flex-grow-1">
    <span class="form-picker-icon">📅</span>
    <input type="date" class="form-control" id="rangeStartDate" name="startDate" value="2026-10-01">
  </div>
  <span class="form-date-separator"><span>to</span></span>
  <div class="form-picker-group flex-grow-1">
    <span class="form-picker-icon">📅</span>
    <input type="date" class="form-control" id="rangeEndDate" name="endDate" value="2026-10-15">
  </div>
</div>